Question

我有一个带有多个标记的简单谷歌地图（在这种情况下为4）。我想在点击事件上添加一个“气泡”。标记很好，但气泡（infowindow）始终显示在最后一个引脚上。我的意思是：

我点击标记[1] - infowindow显示在标记[3]上我点击标记[[2] - infowindow显示在标记[3] 等

我认为问题在于我循环数组的方式

这是我的循环，遍历数组的4个元素：

 var key = 0;
 var markers = new Array();
 var infowindows = new Array();

 for(key in myJson.hotels)
    {
    var newLatlng = new google.maps.LatLng(myJson.hotels[key].latitude,myJson.hotels[key].longitude);

    markers[key] =  new google.maps.Marker(
    {
      position: newLatlng,
      map: map,
      title: 'Hello World!'
    }); 
    // the code above works fine - it renders 4 pins o my map

    infowindows[key] = new google.maps.InfoWindow(
    {
     content: contentString
    });           

    google.maps.event.addListener(markers[key], 'click', function() {
      //console.log(key);  <-- this always return [3]
      infowindows[key].open(map,markers[key]);
    }); 

    //console.log(key); <-- this always return the right key - 0,1,2,3
  }    
}

Answer 1

addListener中的函数被异步调用。当它被调用时你不知道key有哪个值。

您可以通过将密钥存储在闭包中来解决此问题。

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

Answer 2

我使用了@phylax提示，我用这种方式解决了问题：

我做了一个新功能：

function addClickEventToMarker(aMap,aKey){
  google.maps.event.addListener(markers[aKey], 'click', function() {
      //console.log(key);  <-- this always return [3]
      infowindows[aKey].open(aMap,markers[aKey]);
  });
}

我在'for'循环中调用该函数：

for(key in myJson.hotels)
    {
    var newLatlng = new google.maps.LatLng(myJson.hotels[key].latitude,myJson.hotels[key].longitude);

    markers[key] =  new google.maps.Marker(
    {
      position: newLatlng,
      map: map,
      title: 'Hello World!'
    }); 


    infowindows[key] = new google.maps.InfoWindow(
    {
     content: contentString
    });           
    addClickEventToMarker(map, key);
  }    
}

for循环中的键具有意外值

2 个答案: