用谷歌地圖打破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的另一個問題可能會幫助您瞭解閉包如何訪問變量。