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

Question

我正在使用谷歌地图的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存储信息窗口对象。

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

    }