我目前正在使用以下代码,使用他们的API在Google Map上放置多个标记 .
我遇到的问题是多个infowindows无法工作(只显示最后一个) .
SO上有很多像我这样的问题 . 实际上做了一大堆问题:-)
举个例子:Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing
我的问题的解决方案有点简单:只需将click监听器包含在(匿名)函数中 .
但是我不明白的是为什么我的解决方案不起作用(将数组中的标记和infowindows保存而不是只保存一个变量) .
var markers = [];
var infowindows = [];
// add shops or malls
for (var key in data.markers) {
if (data.markers.hasOwnProperty(key)) {
infowindows[key] = new google.maps.InfoWindow({
content: data.markers[key].infowindow
});
markers[key] = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[key].location.lat, data.markers[key].location.lng),
map: map,
flat: true,
title: data.markers[key].name,
draggable: false
});
var iconFile = 'http://maps.google.com/mapfiles/ms/icons/'+marker_color+'-dot.png';
markers[key].setIcon(iconFile);
google.maps.event.addListener(markers[key], 'click', function() {
infowindows[key].open(map, markers[key]);
});
}
}
所以...我不知道如何得到解决方案如何使用一些函数来封闭监听器(尽管它应该工作,还没有测试它但是会),但我想知道为什么它如果我将标记和infowindows添加到数组中将无法工作 .
7 回答
Javascript有一种叫做“闭包”的语言结构 . 闭包是函数(例如您在上面声明的用于处理单击侦听器的函数(){},它捕获对外部变量的引用 .
有很多资源可以比我更好地解释它们,我建议你咨询,但这是我最好的尝试:
在这个块中:
因为“key”已经被定义为外部变量,所以该函数将捕获对该变量的引用 . 所以你期望的地方:
Javascript会将其解释为:
当您单击标记时,它会查找“对键的引用”以查看键的当前值 . 因为在循环完成之前这可能不会发生,所以key将等于data.markers对象中的最后一个键 . 它将等于您添加的每个点击监听器的值 .
正如您所指出的,解决方案是将其包装在匿名函数中,以使Javascript在添加单击侦听器时评估“key”的值 .
这对我来说很好!只需向marker对象添加一个新属性,该属性包含infowindow对象 .
有一种稍微简单的方法来实现这一目标 . 您可以为标记添加自定义属性(信息窗口的索引)并在回调函数中引用它 . 示例如下:
This对于带有演示页面的解决方案,这是一个非常好的解释 .
This是演示页面 .
我将使用闭包: