Question

我正在使用google地图的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对象。

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

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

  }

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

2 个答案: