Google Maps的JS循环损坏

Question

我的代码在下面，我遇到了几乎相同的代码的问题，并在此处将其修复在StackOverflow上，但是同样，它无法正常工作。 我没有更改工作代码，但是我确实将其包装在for...in循环中，您将在下面看到。 问题是，无论我单击哪个标记，它始终会触发最后放置的标记/ infoWindow。

$(function(){
    var latlng = new google.maps.LatLng(45.522015,-122.683811);
    var settings = {
        zoom: 10,
        center: latlng,
        disableDefaultUI:true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
    $.getJSON('api',function(json){
        for (var property in json) {
            if (json.hasOwnProperty(property)) {
                var json_data = json[property];
                var the_marker = new google.maps.Marker({
                    title:json_data.item.headline,
                    map:map,
                    clickable:true,
                    position:new google.maps.LatLng(
                        parseFloat(json_data.item.geoarray[0].latitude),
                        parseFloat(json_data.item.geoarray[0].longitude)
                    )
                });
                var infowindow = new google.maps.InfoWindow({
                    content: '<div><h1>'+json_data.item.headline+'</h1><p>'+json_data.item.full_content+'</p></div>'
                });
                new google.maps.event.addListener(the_marker, 'click', function() {
                    infowindow.open(map,the_marker);
                });
            }
        }
    });
});

感谢您解决这个问题的人！

Answer 1

这是在创建每个事件处理程序闭包（函数）时的情况：

new google.maps.event.addListener(the_marker, 'click', function() {
    infowindow.open(map,the_marker);
});

...每个变量都获得对变量the_marker的持久引用， 而不是创建闭包时的值。 因此，该闭包函数的所有副本都使用相同的值（循环中分配给它的最后一个值）。 关闭并不复杂（ 更多信息请参见此处 ），但是我们只能说您不是第一个犯此错误的人。 :-)这很容易做到。

因此，您想要做的就是在循环迭代中捕获the_marker的值 ，这很容易做到：

new google.maps.event.addListener(
    the_marker,
    'click',
    buildHandler(map, the_marker));

function buildHandler(map, marker) {
    return function() {
        infowindow.open(map, marker);
    };
}

那里，我们有一个函数，该函数使用传递给函数的参数构建处理程序，并在每次循环迭代时调用该函数为我们创建处理程序。

对SO另一个问题的这个答案可能有助于您直观地了解闭包如何访问变量。