javascript - Google Maps API - 数组和 InfoWindows 的问题

Question

抱歉，如果这是微不足道的，但我是 JS 的新手，并且已经解决这个问题几个小时但无济于事。

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var markersArray = [];
var infowindowArray = [];

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markersArray.push(marker);
}

function addInfowindow(string) {
    infowindow = new google.maps.InfoWindow({content: string});
    infowindowArray.push(infowindow);
}

function findvenues(latitudelongitude) {
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){
    var myObject = eval('(' + data + ')');
    for(x in myObject.response.venues){
        var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng);
        addMarker(latlonglocation);
        addInfowindow(myObject.response.venues[x].name);
        google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});
        console.log(markersArray[x],infowindowArray[x]);
    }
});

调用 findvenues 时，应添加信息窗口点击事件。当我单击图标时，信息窗口数组中最后一个元素的相同信息窗口总是打开。

但是，如果我手动输入以下代码，它会起作用:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);});
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);});

虽然我需要它是动态的...我做错了什么？如果问题不清楚，请告诉我，我会尽力澄清。

Answer 1

在循环中更改对“addListener”的调用:

      google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});

为此:

      google.maps.event.addListener(markersArray[x], 'click', (function(x) {
        return function() {
          infowindowArray[x].open(map,markersArray[x]);
        }
      })(x));

通过引入另一个 类似的函数，您创建了一个全新的范围。这会“卡住”您传入的“x”的值，以便返回的函数(换句话说，将传递给 Google API 的实际处理函数)可以访问它自己的“x”，与在该循环中建立的所有其他处理程序。

如果您不这样做，那么所有的处理程序共享完全相同的小“x”，这显然是行不通的。

编辑 — 还有其他方法可以做到这一点。你可以把那个额外的函数写成一个完全独立的东西:

function makeMapListener(window, map, markers) {
  return function() { window.open(map, markers); };
}

然后循环中的语句将如下所示:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x]));

它的重要部分是在构造处理程序函数之前复制在循环期间发生变化的变量。