代码之家 › 专栏 › 技术社区 › Mathias Schnell

尝试将多个infowindows绑定到google地图上的多个标记,但失败

google-maps json ajax javascript

12

Mathias Schnell · 技术社区 · 16 年前

我的项目使用一个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是地图上所有标记对象的数组,tooltips是存储infowindows对象的另一个数组。它们是全球性的。

3 回复 | 直到 12 年前

1

20

Community Mohan Dere 9 年前

这是一个很常见的问题 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回调调用listenmarker(您当前正在调用addlistener)。

2

4

Colin Wiseman 14 年前

您也可以这样做:

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

其中“marker”在add listener调用中替换为“this”。因此,可以将addlisterner代码放在创建标记的同一点上,而不必创建新函数。

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

查看完整的解决方案和演示:d

3

2

notreadbyhumans 15 年前

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