使用 jquery .each() 创建具有多个标记的 google 地图

Question

我已经阅读了所有关于创建带有多个标记的 google 地图的帖子，但我似乎无法让它正常工作。我有一个结果页面，根据用户在搜索表单上的选择列出地址。我正在使用 .each 循环获取这些地址并将它们添加到数组中。然后我使用另一个 .each 循环对地址进行地理编码并在地图上创建标记。这是我尝试过的：

$(function() {
    var address = [];
    var price = [];
    var image = [];
    $('ul.property-list li').each(function(n) {
        var street = $('ul.property-list li .property-text .street').text();
        var city = $('ul.property-list li .property-text .city').text();
        price[n] = $('ul.property-list li .price').text();
        image[n] = $('ul.property-list li .property-image IMG').attr('src');
        address[n] = street+','+city;
    });

    // Google Maps API
    var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        $.each(address, function(n) {
            if (n<10) {
                geocoder.geocode( {'address': address[n]}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var marker = new google.maps.Marker({
                            map:map,
                            position: results[n].geometry.location
                        });
                        var infocontent = '<div style="width:250px;overflow:hidden;"><img style="float:left;width:100px;margin-right:8px;" src="'+image[n]+'" /><div><div style="font-weight:700;font-size:20px;padding-bottom:5px;">$'+price[n].toLocaleString()+'</div>'+address[n]+'</div></div>';
                        var infowindow = new google.maps.InfoWindow ({
                            content: infocontent
                        });
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);
                        });
                    }
                    if (n == 0) {
                        map.setCenter(results[0].geometry.location);
                    }
                });
            }

        });
        map = new google.maps.Map(document.getElementById('map2'), mapOptions);
        var mapOptions = {
            zoom:14,
        }

    }
    initialize();       
});

我在 firebug 中没有收到任何错误，而且我已经成功地将代码用于单个地址，所以我不确定在尝试使用 .each 时我的错误在哪里。任何帮助都会很棒，因为这已经困扰我一段时间了。

编辑

好的，所以我现在可以绘制地图了，但我运行遇到的问题是，当有多个地址时，它只创建一个标记并将两个标记的内容放在相同的信息窗口您可以在我创建的fiddle中看到我指的是什么：http://jsfiddle.net/a7n465az/5/

Answer 1

仔细看看这段代码：

var marker = new google.maps.Marker({
    map:map,
    position: results[n].geometry.location
});

您使用 n 作为 results 数组的索引，但 n 实际上是 price、image 和 image 的索引address 个数组，它们都对相应的元素使用相同的数组索引。

但是，results 不是您的并行数组之一。它是一个完全独立的数组，传递给 geocoder.geocode() 回调函数。它的长度与其他三个数组的长度无关，n 是使用错误的索引。您可能只是想在这里 0 ，因为您稍后在设置地图中心时也会在函数中使用：

var marker = new google.maps.Marker({
    map:map,
    position: results[0].geometry.location
});

此外，我想对一种编程技术提出非常强烈的建议。与其为 price、image 和 address 创建单独的数组，不如为所有对象创建一个数组，这样会多其中三个值。然后使该数组的每个元素成为具有这三个属性的对象。

例如，我们将该数组称为 places，数组的单个元素将是 place，其中 place.price、place.image 和 place.address属性。

那么代码可能看起来像这样：

$(function() {
    var places = [];
    $('ul.property-list li').each(function(n) {
        var street = $('ul.property-list li .property-text .street').text();
        var city = $('ul.property-list li .property-text .city').text();
        places.push({
            price: $('ul.property-list li .price').text(),
            image: $('ul.property-list li .property-image IMG').attr('src'),
            address: street + ',' + city
        });
    });

    // Google Maps API
    var geocoder;
    var map;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        $.each( places, function( n, place ) {
            if (n >= 10) return false;  // done
            geocoder.geocode({
                'address': place.address
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    var infocontent =
                        '<div style="width:250px;overflow:hidden;">' +
                            '<img style="float:left;width:100px;margin-right:8px;" src="' +
                                place.image + '" />' +
                            '<div><div style="font-weight:700;font-size:20px;padding-bottom:5px;">$' +
                                place.price.toLocaleString() +
                            '</div>' + place.address +
                        '</div></div>';
                    var infowindow = new google.maps.InfoWindow({
                        content: infocontent
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map, marker);
                    });
                }
                if (n == 0) {
                    map.setCenter(results[0].geometry.location);
                }
            });
        });

        map = new google.maps.Map(document.getElementById('map2'), mapOptions);
        var mapOptions = {
            zoom: 14,
        }

    }
    initialize();
});

这看起来可能没有太大区别，但请相信我（多年经验之谈），它会让您的代码在维护和扩展时更易于使用。

（请原谅任何不合您口味的代码重新格式化 - 我对其进行了一些更改以缩短行数并使差异更加明显。）

Answer 2

如果其他人试图使用 $.each 将多个标记添加到 google 地图，这就是最终的工作方式。

$(function() {
                    function commaSeparateNumber(val){
                        while (/(\d+)(\d{3})/.test(val.toString())){
                            val = val.toString().replace(/(\d+)(\d{3})/, ''+','+'');
                        }
                        return val;
                    }

                    $('.price').each(function() {
                        var number = $(this).text();
                        $(this).text('$'+commaSeparateNumber(number));
                    });

                    var places = [];
                    $('ul.property-list li').each(function() {
                        var street = $(this).find('.street').text();
                        var city = $(this).find('.city').text();
                        places.push({
                            price: $(this).find('.price').text(),
                            image: $(this).find('.property-image IMG').attr('src'),
                            address: street + ', ' + city
                        });
                    });

                    // Google Maps API
                    var geocoder;
                    var map;
                    var markersArray = [];
                    var bounds;
                    function initialize() {
                        geocoder = new google.maps.Geocoder();
                        bounds = new google.maps.LatLngBounds();
                        $.each( places, function( n, place ) {
                            if (n >= 10) return false;  // done
                            geocoder.geocode({
                                'address': place.address
                            }, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    marker = new google.maps.Marker({
                                        map: map,
                                        position: results[0].geometry.location
                                    });
                                    var infocontent = '<div style="width:250px;overflow:hidden;"><img style="float:left;width:100px;margin-right:8px;" src="' + place.image + '" /><div><div style="font-weight:700;font-size:20px;padding-bottom:5px;">' + place.price + '</div>' + place.address + '</div></div>';
                                    var infowindow = new google.maps.InfoWindow({
                                        content: infocontent
                                    });
                                    google.maps.event.addListener(marker, 'click', function() {
                                        infowindow.open(map, this);
                                    });
                                }

                                bounds.extend(marker.position);
                                markersArray.push(marker);
                                map.fitBounds(bounds);
                            });

                        });
                        var mapOptions = {
                            maxZoom:14,
                        }
                        map = new google.maps.Map(document.getElementById('map2'), mapOptions);
                    }
                    initialize();
                });

使用 jquery .each() 创建具有多个标记的 google 地图

Creating google map with multiple markers using jquery .each()

jquery

google-maps

geocoding

google-maps-api-3