谷歌地图：多个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++; 
   }