Google Maps API：循环中的信息框 - 为什么所有信息框都显示最后一个值？

Question

我基本上有一个状态数组，我遍历它们，为每个状态创建一个标记，然后创建一个信息框，当将鼠标悬停在每个标记上时应该出现（并在鼠标移出时消失）。我的麻烦是，当标记正确显示时，所有状态标记的信息框都显示最后的信息框内容。这可能与变量作用域和/或异步执行有关 - 我该如何解决？

（当我使用像 Firebug 这样的调试器单步执行它时，它似乎正在为每个状态正确构建文本 - 但不知何故，它在最后显示了相同的信息）

循环中适用的代码（有些简化）：

mark = new google.maps.Marker({          
        map: map,             
        position: center,
        icon:markerImage,
        stateIndex: i // custom attribute for state index so that we can access allStates[index] from within the marker event callbacks
    });
stateMarkers.push(mark);

// text for info box
var info = statesArray[i].name + "<br/>" + "Total: " + statesArray[i].total + "<br/>";

//set text for infoBox
var boxText = '<div class="stateMarker">' + info + '</div>';

//set options for infoBox
var myOptions = {
    content: boxText,
    disableAutoPan: true,
    maxWidth: 0,
    zIndex: null,
    boxStyle: { 
      background: "url('tipbox.gif') no-repeat",
      opacity: 1,
      width: "75px"
     },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};

//instantiate infoBox with options set in myOptions
var ib = new InfoBox(myOptions);

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () {
    ib.open(map, this); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function(){
    ib.close(map,this); //close infoBox

});

Answer 1

我最终做了什么：

在标记之前声明信息框，并将信息框作为自定义属性添加到标记中 - 这样，每个状态标记都有一个带有正确文本的信息框。

// text for info box
var info = statesArray[i].name + "<br/>" + "Total: " + statesArray[i].total + "<br/>";

//set text for infoBox
var boxText = '<div class="stateMarker">' + info + '</div>';

//set options for infoBox
var myOptions = {
    content: boxText,
    disableAutoPan: true,
    maxWidth: 0,
    zIndex: null,
    boxStyle: { 
      background: "url('tipbox.gif') no-repeat",
      opacity: 1,
      width: "75px"
     },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};

//instantiate infoBox with options set in myOptions
var ib = new InfoBox(myOptions);

mark = new google.maps.Marker({          
        map: map,             
        position: center,
        icon:markerImage,
        stateIndex: i, // custom attribute for state index so that we can access allStates[index] from within the marker event callbacks
        infobox: ib
    });
stateMarkers.push(mark);

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () {
    this.infobox.open(map, this); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function(){
    this.infobox.close(map,this); //close infoBox
});

Answer 2

您的代码看起来很完美，但是 只需更改并尝试这样：

 ib.open(map, mark) instead ib.open(map, this)

即：

//create mouseover listener for marker on each state
google.maps.event.addListener(mark, 'mouseover', function () 
{
   ib.open(map, mark); //open infoBox
});

//create mouseout listener for marker on each state
google.maps.event.addListener(mark, 'mouseout',function()
{
   ib.close(map,mark); //close infoBox
});