Question

我对jQuery / Javascript不太满意，但我确信以下内容是可行的，但我不知道应该如何开始这样做。

我正在使用Google Maps API。在WordPress中，我有一些severel帖子，我在其中提到了内容中的地址。

现在，我用一个简单的循环输出地址，但我要做的是用jQuery读取这些地址，将它们放在一个数组中并在地图上显示它们。

目前它只显示遇到的第一个地址，但实际上我需要使用<div class="address"></div>遍历每个div：

这是我的PHP / HTML的样子：

        <?php

            $kantorenArgs = array(

                'post_type' => 'kantoren',
                'posts_per_page' => '4'

            );

            $kantoren = new WP_Query($kantorenArgs);

            if ($kantoren->have_posts()) :

                while ($kantoren->have_posts()) : $kantoren->the_post(); ?>

                <li class="office">

                    <a href="<?php the_permalink(); ?>">

                        <?php the_title(); ?>

                        <div class="address"><?php the_content(); ?></div>

                    </a>

                </li>

                <?php

                endwhile;

            endif;

        ?>

这是我正在使用的jQuery：

    jQuery(document).ready(function () {

        (function($) {

          $.get_addresses = function() {

            var address = $(".address").html();

            return address;

          }
        })(jQuery);

        var map;
        var elevator;
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(50.9660922, 4.5574837),
            mapTypeId: 'roadmap'
        };
        map = new google.maps.Map($('#map_canvas')[0], myOptions);

        var addresses = [$.get_addresses()];

        for (var x = 0; x < addresses.length; x++) {
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                new google.maps.Marker({
                    position: latlng,
                    map: map
                });

            });
        }

    });

感谢您的帮助！

Answer 1

将var addresses = [$.get_addresses()];替换为：

       $('.address').each(function() {
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+$(this).html()+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });

        });
     });

您还可以删除我们不再使用的功能(function($) {...})(jQuery)

Answer 2

而不是创建一个函数go get all address use .each()

$('.address').each(function(){
   $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+$(this).html()+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map
            });
        });
});

jquery：循环遍历类似的div

2 个答案: