尝试将多个InfoWindows绑定到Google地图上的多个标记并失败

Question

我的项目使用JSON提要来获取有关指定纬度和经度边界内地震的信息，基本上是制作一个方框。 我获取此信息并将所有结果转换为Google地图上的标记。 我需要每个标记也显示一些额外的信息，所以我试图使用内置的InfoWindow对象，这样当你点击一个标记时，你打开工具提示，其中包含与该标记相关的一些信息。 然而，我发现无论我点击什么标记，同一个infowindow总是出现在该组的同一个标记之上，我相信它总是在我的循环中创建的最后一个infowindow。 这是代码。

$.getJSON(url, function(json) {
                    for(var i = 0; i < json.earthquakes.length; i++)
                    {
                        var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng);
                        var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng;
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: pos,
                            title: json.earthquakes[i].eqid
                        })
                        var tooltip = new google.maps.InfoWindow({
                            content: info
                        })
                        google.maps.event.addListener(marker, 'click', function() {
                            tooltip.open(map, marker);
                        });
                        markers.push(marker);
                        tooltips.push(tooltip);
                    }               
                });

markers是地图上所有标记对象的数组，工具提示是另一个用于存储infowindows对象的数组。 他们是全球性的。

Answer 1

这是google-maps标签中一个非常常见的问题，很容易犯错:)。

发生的事情是你的click事件被异步调用，它正在getJSON回调中的marker变量中获取当前值（列表中的最后一个）。

您需要在函数中包装addListener调用，以便围绕在单击回调中使用的标记变量创建闭包：

function listenMarker (marker)
{
    // so marker is associated with the closure created for the listenMarker function call
    google.maps.event.addListener(marker, 'click', function() {
                        tooltip.open(map, marker);
                    });
}

然后从主getJSON回调（当前正在调用addListener）调用listenMarker。

Answer 2

你也可以这样做：

// so marker is associated with the closure created for the listenMarker function call
google.maps.event.addListener(marker, 'click', function() {
                    tooltip.open(map, this);
                });

其中“标记”在添加侦听器调用中替换为“this”。 因此，您可以将addListerner代码放在创建标记的同一点，而不必创建新函数。

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

查看完整的解决方案和演示：D

Answer 3

将addListener调用放入其自己的函数中也解决了多个infowindows都显示相同文本的问题。