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，而不是的持久引用。因此，该闭包函数的所有副本都使用相同的值（循环中为其分配的最后一个值）。关闭并不复杂（more here），但我们只是说你不是第一个犯这个错误的人。 :-)这很容易做到。

所以你要做的是从循环迭代中捕获the_marker的值，这很容易做到：

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

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

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

This answer关于SO的另一个问题可能会帮助您想象闭包如何访问变量。

用谷歌地图打破JS循环

1 个答案: