谷歌地图:多个InfoWindows总是显示最后的值

Google Maps: Multiple InfoWindows always show last value

本文关键字：显示 最后的 多个 InfoWindows 谷歌地图      更新时间：2023-09-26

好吧，我意识到我是第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++;
}

这里的问题是变量范围。让我们来分析一下:

// 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变量作为参数传递给其中一个函数——这将使click处理程序中的引用指向局部作用域变量。这里有两种方法:

  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. 创建一个新函数来附加click处理程序，并将计数器传递给该函数:

    // 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++;
}
相关文章：