谷歌地圖：多個InfoWindows總是顯示最後一個值

Question

好吧，所以我意識到我是第100個問這個問題的人，但是即使經過多天的研究和嘗試不同的事情，現在我也弄不明白。 我有一個功能，將在谷歌地圖上創建標記。我將傳遞此函數的座標以及將顯示在應該附加到每個標記的infoWindow中的HTML。

許多其他人都有的問題是，即使在我的超級簡單示例中，infoWindow的內容始終是爲任何infoWindow設置的最後內容，而不是創建特定標記時設置的內容。

我該如何解決這個問題？

這裏是我的代碼：

var somerandomcounter = 0; 

function addMarkerNew(){ 
    markers[somerandomcounter] = new GMarker(new GLatLng(52.3666667+somerandomcounter,9.7166667+somerandomcounter),{title: somerandomcounter}); 
    map.addOverlay(markers[somerandomcounter]); 

    var marker = markers[somerandomcounter]; 

    GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
    }); 

somerandomcounter++; 
} 

Answer 1

這裏的問題是變量的作用域。讓我們來分析一下：

// variable is in the global scope 
var somerandomcounter = 0; 

function addMarkerNew(){ 
    // now we're in the addMarkerNew() scope. 
    // somerandomcounter still refers to the global scope variable 
    // ... (some code elided) 
    var marker = markers[somerandomcounter]; 

    GEvent.addListener(marker, "click", function() { 
     // now we're in the click handler scope. 
     // somerandomcounter *still* refers to the global scope variable. 
     // When you increment the variable in the global scope, 
     // the change will still be reflected here 
     marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
    }); 

    // increment the global scope variable 
    somerandomcounter++; 
} 

解決這個問題的最簡單的方法是將somerandomcounter變量傳遞到函數作爲一個參數一個 - 這將保持指向本地單擊處理參考範圍變量。這裏有兩種方法可以做到這一點：

1. 傳遞計數器作爲參數傳遞給addMarkerNew：

   // variable is in the global scope 
   var somerandomcounter = 0; 
   
   function addMarkerNew(counter){ 
       // now we're in the addMarkerNew() scope. 
       // counter is in the local scope 
       // ... 
       var marker = markers[counter]; 
   
       GEvent.addListener(marker, "click", function() { 
        // now we're in the click handler scope. 
        // counter *still* refers to the local addMarkerNew() variable 
        marker.openInfoWindowHtml("<b>"+somerandomcounter+"</b>"); 
       }); 
   } 
   
   // call the function, incrementing the global variable as you do so 
   addMarkerNew(somerandomcounter++); 
   

2. 做一個新的功能來連接單擊處理程序，並通過櫃檯到該函數：

   // variable is in the global scope 
   var somerandomcounter = 0; 
   
   // make a new function to attach the handler 
   function attachClickHandler(marker, counter) { 
       // now we're in the attachClickHandler() scope. 
       // counter is a locally scope variable 
       GEvent.addListener(marker, "click", function() { 
        // now we're in the click handler scope. 
        // counter refers to the local variable in 
        // the attachClickHandler() scope 
        marker.openInfoWindowHtml("<b>"+counter+"</b>"); 
       }); 
   } 
   
   function addMarkerNew(){ 
       // now we're in the addMarkerNew() scope. 
       // somerandomcounter still refers to the global scope variable 
       // ... 
       var marker = markers[somerandomcounter]; 
   
       // attach the click handler 
       attachClickHandler(marker, somerandomcounter) 
   
       // increment the global scope variable 
       somerandomcounter++; 
   }