javascript - 尝试将多个 InfoWindows 绑定(bind)到 Google map 上的多个标记并失败

Question

我的项目使用 JSON 提要来获取指定纬度和经度边界内的地震信息，本质上是制作一个盒子。我获取这些信息并将所有结果转化为谷歌地图上的标记。我需要每个标记还显示一些附加信息，因此我尝试使用内置的 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 是 map 上所有标记对象的数组，tooltips 是另一个用于存储 infowindows 对象的数组。它们是全局性的。

Answer 1

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

发生的情况是您的点击事件被异步调用，它在 getJSON 回调(列表中的最后一个)中获取标记变量中的当前值。

您需要将 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。