尝试将多个 InfoWindows 绑定到 Google 地图上的多个标记并失败 [英] Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

问题描述

我的项目使用 JSON 提要来获取指定纬度和经度边界内的地震信息，本质上是制作一个盒子.我获取此信息并将所有结果转换为 Google 地图上的标记.我需要每个标记还显示一些附加信息，因此我尝试使用内置的 InfoWindow 对象，这样当您单击标记时，您会打开带有与该标记相关联的一些信息的工具提示.但是我发现无论我点击什么标记，相同的信息窗口总是出现在该组的相同标记之上，我相信它总是在我的循环中创建的最后一个信息窗口.这是代码.

My project uses a JSON feed to grab info about earthquakes within a specified latitude and longitude boundary, essentially making a box. I take this info and turn all the results into markers on a Google map. I need each marker to also display some additional information, so I'm trying to use the built in InfoWindow objects such that when you click on a marker you open up the tooltip with some information associated with that marker. However I'm finding that no matter what marker I click, the same infowindow always comes up above the same marker of that group, and I believe it is always the last infowindow created in my loop. Here's the code.

$.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 是地图上所有标记对象的数组，tooltips 是另一个用于存储 infowindows 对象的数组.它们是全球性的.

markers is an array for all the marker objects on the map and tooltips is another array for storing the infowindows objects. They're global.

推荐答案

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

This is a very common question in the google-maps tag and an easy mistake to make :).

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

What is happening is that your click event is being called asynchronously and it is picking up the current value in the marker variable in the getJSON callback (the last one in the list).

您需要将 addListener 调用包装在一个函数中，以便在点击回调中使用的标记变量周围创建一个闭包:

You need to wrap your addListener call in a function so that a closure is created around the marker variable that is being used in the click callback:

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.

Then call listenMarker from your main getJSON callback (where you are currently calling addListener).

这篇关于尝试将多个 InfoWindows 绑定到 Google 地图上的多个标记并失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！