用谷歌地图打破JS循环

Question

我的代码如下，我有一个几乎相同的代码的问题，它在这里修复了StackOverflow，但它再次，它不工作。我没有改变工作代码，但我确实把它包装在你会在下面看到的for...in循环中。问题是无论我点击哪个标记，它总是触发放置的最后一个标记/信息窗口。

$(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的另一个问题可能会帮助您了解闭包如何访问变量。