javascript - 变量覆盖到 for 循环中

Question

我正在尝试使用 V3 向 Google map 添加标记。我将我的位置放入一个 json 对象(位置)中:

var num_places = places.length;
for(var i = 0; i < num_places; i++)
{
    place_lat_lng = new google.maps.LatLng(places[i].lat, places[i].lng);
    var infowindow = new google.maps.InfoWindow({
        content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>'
    });
    var marker = new google.maps.Marker({
        position: place_lat_lng,
        map: mymap,
        title: places[i].name,
        zIndex: i
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(mymap, marker);
    });
}

代码插入标记，但是当我点击其中任何一个时，信息窗口总是显示(并移动 map )到列表中的最后一个标记。

我尝试为信息窗口使用一个数组:

var infoWindow = new Array();
for(var i = 0; i < num_places; i++)
{
    [...]
    var infowindow[i] = new google.maps.InfoWindow({
        content: '<h2>' + places[i].name + '</h2><p>' + places[i].body + '</p>'
    });
    [...]
    google.maps.event.addListener(marker, 'click', function() {
        infowindow[i].open(mymap, marker);
    });
}

但什么都没有改变。

我哪里弄错了？

Answer 1

在 JavaScript 中，只有函数会创建新的作用域/闭包。因此，您只有一个 infowindow 变量，它被捕获到内部函数中，但最终将指向最后一个窗口。使用自调用函数设置新的关闭:

for (var i = 0; ...) {
    (function() {
        var infowindow = ...;
    })();
}

请注意，i 的值仍然不会被单独捕获。目前你似乎不需要它，但如果你需要，将它传递给函数以在函数内部创建它的本地版本:

(function(i) { // this is the new local i with the value passed in from the outside
    // ...accessible here
})(i); // this is the outer i