google-maps - 使用 infowindows 添加多个标记(Google map API)

Question

我目前正在使用以下代码，通过其 API 在 Google map 上放置多个标记。

我遇到的问题是多个信息窗口不起作用(仅显示最后一个)。

这里有很多像我这样的问题。实际上让这成为一堆问题:-)

举个例子:Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

我的问题的解决方案很简单:只需将点击监听器包含在(匿名)函数中即可。

但是我不明白的是为什么我的解决方案不起作用(将标记和信息窗口保存在数组中而不是仅保存一个变量)。

    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]);
        });
      }
    }

所以......我不知道如何得到解决方案如何让它与某些函数一起工作以封闭监听器(虽然它应该工作，尚未测试它但会)，但我想知道如果我将标记和信息窗口添加到数组中，它就不起作用的原因。

Answer 1

Javascript 有一种称为“闭包”的语言结构。闭包是捕获对外部变量的引用的函数(例如您上面声明的用于处理点击监听器的 function() {})。

有很多资源比我能更好地解释它们，我建议您查阅，但这是我的最佳尝试:

在此 block 中:

    google.maps.event.addListener(markers[key], 'click', function() {
      infowindows[key].open(map, markers[key]);
    });

因为“key”已被定义为外部变量，所以该函数将捕获对该变量的引用。所以你期望的地方:

infowindows["helloworld"]

Javascript 会将其解释为:

infowindows[reference to key]

当您单击标记时，它会查找“对键的引用”以查看键的当前值是什么。因为在循环完成之前这可能不会发生，所以 key 将等于 data.markers 对象中的最后一个键。对于您添加的每个点击监听器，该值都等于该值。

正如您所指出的，解决方案是将其包装在匿名函数中，以使 Javascript 在添加点击监听器时评估“key”的值。

  google.maps.event.addListener(markers[key], 'click', function(innerKey) {
      return function() {
          infowindows[innerKey].open(map, markers[innerKey]);
      }
    }(key));