在 Google Maps v3 上显示标记数组时出现问题答案

【问题标题】：Trouble displaying an array of markers on Google Maps v3在 Google Maps v3 上显示标记数组时出现问题
【发布时间】：2011-09-18 09:41:47
【问题描述】：

我编写了一个简短的脚本来获取一组位置对象（由 PHP 生成）并将它们绘制在 Google 地图上。

对于我的一生，我无法弄清楚为什么 addMarker() 循环会中断？

我发送给initializeMap()的数组示例：

[
    {
        date: '08/11/2011',
        venue: 'Notes',
        city: 'Newtown, NSW',
        ticket: 'http://noteslive.net.au/'
    }
]

还有代码：

// Accepts an array of gigs  
function initializeMap(gigs) {

var markers = gigs;

// Create geocoder
var geocoder = new google.maps.Geocoder();

// Create the map
var map = new google.maps.Map(document.getElementById("gigpress-map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Create infowindow object
var infowindow = new google.maps.InfoWindow({
    content: "holding..."
});

// Add markers to map
for (index in markers) addMarker(markers[index]);

function addMarker(data) {
    alert('bang');
    geocoder.geocode( { 'address': data.city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker( {
                position: results[0].geometry.location,
                map: map,
                title: data.venue
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    // Bind click event to each marker
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, this);
    });
}

// Zoom and center the map to fit the markers
var bounds = new google.maps.LatLngBounds();

for (index in markers) {
    var data = markers[index];
    geocoder.geocode( { 'address': data.city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            bounds.extend(new google.maps.LatLng(results[0].geometry.location));
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    }); 
}

map.fitBounds(bounds);
}

【问题讨论】：

哪里坏了？它是成功地进行地理编码还是没有请求去地理编码器？
在 jsfiddle 上托管代码并尝试在那里重现错误并使用链接更新问题
是的，它成功地进行了地理编码。循环未完成。请耐心等待，我是 jsfiddle 的新手，我现在将在那里主持。
这里是 jsfiddle 的链接...jsfiddle.net/KaSjH

标签： javascript google-maps-api-3 geocoding

【解决方案1】：

问题在于您在标记上添加侦听器的方式。我想我已经修好了，希望你能看到你的标记。这是你发布的 jsfiddle 的更新：

http://jsfiddle.net/anilkamath87/KaSjH/1/

function addMarker(data) {
    alert('bang');
    geocoder.geocode( { 'address': data.city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker( {
                position: results[0].geometry.location,
                map: map,
                title: data.venue
            });
         google.maps.event.addListener(marker, "click", function() {  // Bind click event to each marker should be here. else marker reference not found.
            infowindow.open(map, this);
    });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });



}

【讨论】：

如果你能include the relevant changes in the answer就太好了。如果一个外部站点消失了，甚至只是暂时离线，那么在这里有关键位将非常有帮助。
无论如何我认为这是一个太具体的问题，对其他人没有帮助..这就是为什么我通常不知道..
好点。不过，感谢您添加代码！我确实认为它可以改善答案。 +1
谢谢 zzzz！你是冠军......代表我非常粗心的编码。尽管 fitBounds 函数不起作用，但现在正在绘制标记？在循环中，我将每个坐标添加到绑定对象。这是修改后的链接...jsfiddle.net/KaSjH/2
Trott，一旦我最终解决了这些问题，我将为任何未来的用户发布一个摘要。干杯。

【解决方案2】：

有关完整的工作脚本，请前往 JSFiddle... 此代码将帮助您绘制一组标记并调整地图的查看边界。

http://jsfiddle.net/KaSjH/6/

【讨论】：