添加事件偵聽器到谷歌地圖標記數組失敗

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

    }