Question

我正在尝试使用V3为Google地图添加标记。我把我的地方变成了一个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);
    });
}

代码插入标记，但当我点击其中任何一个时，infoWindow显示（并将地图移动）始终显示在列表中的最后一个标记处。

我尝试使用数组来获取infoWindow：

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

Answer 2

改变这个：

google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(mymap, marker);
    });

为：

google.maps.event.addListener(marker, 'click', function(infowindow) {
        function() {
            infowindow.open(mymap, marker);
        });
    }(infowindow);

问题是你的infowindow变量每次都在循环中重新创建，当点击处理程序触发时，它会查找最新版本的本地闭包。更新后的代码创建了一个新的闭包，它将包含对循环迭代唯一的infowindow版本。

变量重写为for循环

2 个答案: