试图绑定多个信息窗口，以多个标记上的谷歌地图和失败 [英] Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

问题描述

我的项目使用JSON提要抢关于地震的信息在指定的经度和纬度边界，从根本上让一个盒子。我借这个信息，把所有的结果变成标记在谷歌地图。我需要每个标记也显示一些额外的信息，所以我尝试使用，当你点击你打开提示与该标记相关的一些信息标记内置的信息窗口等对象。但是我发现，无论我点击了什么标记，同样的信息窗口总是出现高于该组相同的标记，我相信它总是在我的循环创建的最后一个信息窗口。这里的code。

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 is an array for all the marker objects on the map and tooltips is another array for storing the infowindows objects. They're global.

推荐答案

这是在谷歌地图标记和容易犯的错误：）

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).

这篇关于试图绑定多个信息窗口，以多个标记上的谷歌地图和失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！