Question

好的，所以我意识到我是第100个问这个问题的人，但即使经过几天研究和尝试不同的事情，我也无法弄明白。我有一个功能，将在谷歌地图上创建标记。我将传递此函数的坐标以及将在infoWindow中显示的HTML，该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变量作为参数传递给其中一个函数 - 这将使点击处理程序中的引用保持指向本地范围的变量。以下是两种方法：

将计数器作为参数传递给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++);

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

// 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++;
}

Google地图：多个InfoWindows始终显示最后一个值

1 个答案: