Google 地图：多个 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：

   //变量在全局范围内
   var 随机计数器 = 0;
   
   函数addMarkerNew（计数器）{
       // 现在我们处于 addMarkerNew() 范围内。
       // 计数器在本地范围内
       // ...
       var 标记 = 标记[计数器];
   
       GEvent.addListener(marker, "click", function() {
           // 现在我们处于点击处理程序范围内。
           // 计数器 *still* 引用本地 addMarkerNew() 变量
           marker.openInfoWindowHtml(""+somerandomcounter+"");   
       });
   }
   
   // 调用该函数，同时增加全局变量
   addMarkerNew(somerandomcounter++);
   

2. 创建一个新函数来附加点击处理程序，并将计数器传递到该函数中：

   //变量在全局范围内
   var 随机计数器 = 0;
   
   // 创建一个新函数来附加处理程序
   函数attachClickHandler（标记，计数器）{
       // 现在我们处于 AttachClickHandler() 范围内。
       // counter 是一个局部作用域变量
       GEvent.addListener(marker, "click", function() {
           // 现在我们处于点击处理程序范围内。
           // counter 引用局部变量 
           // AttachClickHandler() 作用域
           marker.openInfoWindowHtml(""+counter+"");
       });
   }
   
   函数addMarkerNew(){
       // 现在我们处于 addMarkerNew() 范围内。
       // somerandomcounter 仍然引用全局范围变量
       // ...
       var 标记=标记[somerandomcounter];
   
       // 附加点击处理程序
       AttachClickHandler（标记，一些随机计数器）
   
       // 增加全局变量
       一些随机计数器++；
   }