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

Question

我基本上有一个状态数组，我通过它们循环，为每个状态创建一个标记，然后创建一个信息框，当它悬停在每个标记上（并在mouseout上消失）时应该出现。我的麻烦是，虽然标记正常显示，但所有状态标记的信息框都显示最后一个信息框内容。这可能需要做一些变量范围和/或异步执行 - 我该如何解决它？

（当我通过它一步有类似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 
}); 

[谷歌地图API V3信息窗口 - 所有的信息窗口显示相同内容]的

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 
});