将事件侦听器添加到谷歌地图标记数组失败答案

【问题标题】：Adding event listeners to an array of google map markers failing将事件侦听器添加到谷歌地图标记数组失败
【发布时间】：2017-03-20 15:46:19
【问题描述】：

我正在使用谷歌地图的 infoWindow 功能添加信息框，当我点击我放置在地图上的任何标记时，这些信息框会弹出。

我的问题：事件侦听器未正确添加到标记中。所有标记都加载了，但是当我单击任何标记时，只会弹出最后一个 infoWindow。

var markers = [];
var infoWindows =[];
for(var x in data.results)
{
        var result = data.results[x]
        var contentString = generateContentString(result);
        var latLng = new google.maps.LatLng(result.coordinates.latitude,result.coordinates.longitude);

        infoWindows[x] = new google.maps.InfoWindow({
            content: contentString
        });
        markers[x] = new google.maps.Marker({
            position: latLng,
            map: map,
            title: result.location
        });
        markers[x].addListener('click', function() {
            infoWindows[x].open(map, markers[x]);
        });
}

markers 存储标记对象，infoWindows 存储 infoWindow 对象。

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

您可以将回调参数写入您的回调上下文中，但这不是很好的方式。

或者你只是使用一个闭包。

var markers = [];
var infoWindows = [];
for (var i in data.results) (function(x){
  var result = data.results[x]
  var contentString = generateContentString(result);
  var latLng = new google.maps.LatLng(result.coordinates.latitude, result.coordinates.longitude);

  infoWindows[x] = new google.maps.InfoWindow({
    content: contentString
  });
  markers[x] = new google.maps.Marker({
    position: latLng,
    map: map,
    title: result.location
  });
  markers[x].addListener('click', function() {
    infoWindows[x].open(map, markers[x]);
  });
})(i);

使用 JS 异步方法，你可以通过调用 .forEach(fn) 来实现它

  data.results.forEach(function(d, x) {
    var result = data.results[x]

    var latLng = new google.maps.LatLng(result.coordinates.latitude, result.coordinates.longitude);

    infoWindows[x] = new google.maps.InfoWindow({
      content: JSON.stringify(data.results[x].coordinates)
    });
    markers[x] = new google.maps.Marker({
      position: latLng,
      map: map,
      title: result.location
    });
    markers[x].addListener('click', function() {
      infoWindows[x].open(map, markers[x]);
    });
  });

【讨论】：

【解决方案2】：

您可以使用 clousure 以便将每次迭代的值保存在适当的侦听器中 ..

  var markers = [];
  var infoWindows =[];

  //  add the clousure 
  var addListenersOnMarker = function(actMarker, actInfoWindow) {
      google.maps.event.addListener(actMarker, 'click', function() {
          actInfoWindow.open(map,actMarker);
      }
    }

  for(var x in data.results)
  {
          var result = data.results[x]
          var contentString = generateContentString(result);
          var latLng = new google.maps.LatLng(result.coordinates.latitude,result.coordinates.longitude);

          infoWindows[x] = new google.maps.InfoWindow({
              content: contentString
          });
          markers[x] = new google.maps.Marker({
              position: latLng,
              map: map,
              title: result.location
          });

          // call the function  
          addListenersOnMarker(markers[x], infoWindows[x] );

  }

【讨论】：