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