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时我的错误在哪里。任何帮助都会很棒，因为这已经困扰了我一段时间了。

修改

好吧我现在让它绘制地图，但我遇到的问题是，当有多个地址时，它只创建一个标记并将两个标记的内容放在同一个infowindow中你可以看到在我创作的小提琴中我指的是什么：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和{{的索引1}}数组，它们都对相应的元素使用相同的数组索引。

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

另外，我想就一种编程技术提出强烈建议。如果您为所有这三个数组只创建一个数组，那么不是为var marker = new google.maps.Marker({ map:map, position: results[0].geometry.location });，price和image创建单独的数组，而是更好值。然后使该数组的每个元素成为具有这三个属性的对象。

例如，让我们调用该数组address，该数组的单个元素将是places place，place.price和{ {1}}属性。

然后代码看起来像这样：

place.image

这可能看起来不是什么大不同，但相信我（多年的经验和经验），它会使您的代码在维护和扩展时更容易使用。

（请原谅任何不符合您口味的代码重新格式化 - 我改变了一下以缩短线条并使差异更明显。）

Answer 2

以下是其他人尝试使用$ .each将多个标记添加到Google地图的最终结果。

$(function() {
                    function commaSeparateNumber(val){
                        while (/(\d+)(\d{3})/.test(val.toString())){
                            val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
                        }
                        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（）创建包含多个标记的谷歌地图

2 个答案: