google地圖API實現動畫軌跡（三）

原文地址 點這

# google地圖點擊彈出InfoWindow,同時關閉上一個InfoWindow

由於項目需求緣由，須要實現如下功能：
- 點擊地圖上的每一個座標標記後顯示其座標信息
- 當有多個點時，地圖上只能存在一個infowindow
解決思路以下：
首先給出google地圖infowindow的一個示例用法（https://developers.google.com/maps/documentation/javascript/examples/event-closure?hl=zh-cn）
示例中爲每一個座標點添加了點擊事件，彈出一個infowindow,在此窗口上顯示信息，具體不在贅述，示例中得源碼很簡單。
但是咱們會發現，當咱們點擊一個點彈出infowindow，而後不去手動關閉，在點擊下一個點時，先前的那個ingowindow仍然留在地圖上，當點擊的不少時，就會是這種效果了：

相信這會讓使用這套系統的人瘋掉的，那麼如何解決這個問題呢？很簡單，每當咱們打開一個新的infowindow時就關閉上一個infowindow,查詢google地圖API,發現infowindow給開發人員提供了close()這個方法，這下一切事情就好辦了。解決思路：
首先須要一個存取infowindow的數組，還有一個存儲上一個infowindow的索引，分別取名爲infowindows和lastindex=-1;而後，每當new一個infowindow時，將其存入infowindows，在爲座標點添加點擊事件時，首先檢查索引值，若爲-1，則跳出if語句，若不爲-1,則將該索引下的infowindow關閉，以後打開新的infowindow,並將新的索引值附給lastindex,方便下一次點擊事件的執行，Demo和代碼以下：

var infowindows = [];
var lastIndex=-1;  
//marker是一個座標標記點
//只需在一個marker數組的每一次循環添加時調用便可
function addMessage(marker) {
                var message="hello"             
                var infowindow = new google.maps.InfoWindow({
                    content : message
                });

                infowindows.push(infowindow);

                google.maps.event.addListener(marker, 'click', function() {
                    if(lastIndex!=-1)
                        {
                          infowindows[lastIndex].close();
                        }
                    infowindow.open(marker.get('map'), marker); 
                        lastIndex=infowindows.indexOf(infowindow,0);
                });
            }

麼西期待你的見解和意見，歡迎交流