將Google地圖更改爲重新使用單個infowindow而不是創建多個

Question

我有一張越來越複雜的Google地圖，它繪製了數千個點並對它們進行聚類。當用戶點擊其中一個地圖標記時，我有一個infowindow開放，並且這一切都很好。然而，我想要做的一個改進是，當打開一個新窗口時強制所有其他infowindows關閉，以便一次只打開一個infowindow。

我嘗試添加一些代碼（if (infowindow) infowindow.close();）到聽者的功能要做到這一點，但我認爲這個問題是更廣泛的在我目前正在創建每個標記信息窗口，並有向其他信息窗口沒有訪問在開啓一個新的事件。因此，從閱讀這篇文章來看，似乎有一個更好的主意，那就是隻有一個infowindow被重用，而不是很多。

麻煩的是，代碼處於我能夠真正理解的邊緣，而我迄今爲止所做的實驗已經破壞了一切。

我目前擁有的代碼如下：

var _iconCenter = new google.maps.MarkerImage('/css/img/map-marker.png', 
    new google.maps.Size(38, 48), 
    new google.maps.Point(0,0), 
    new google.maps.Point(19, 44)); 

var shadow = new google.maps.MarkerImage('/css/img/map-marker-shadow.png', 
    new google.maps.Size(57, 49), 
    new google.maps.Point(0,0), 
    new google.maps.Point(7, 44)); 

var _icon = '/css/img/map-marker-purple.png'; 
var infowindow; 
var markersArray = []; 
var map; 
var currentPosition = 0; 
var currentmarker; 
var firstload = true; 
var maploaded = false; 
var interval = 5000; 
var geocoder; 

var stylez = []; 

function initialize(items,loop,zoom) { 
    geocoder = new google.maps.Geocoder(); 
    if (items.length > 0) { 
    var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng); 
    var myOptions = { 
     zoom: zoom, 
     center: latlng, 
     //mapTypeControl: false, 
     streetViewControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    map.setOptions({styles: stylez}); 

    for (var i = 0; i < items.length; i++) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(items[i].Lat, items[i].Lng), 
     title: items[i].Title, 
     icon: _icon, 
     shadow: shadow, 
     infocontent: items[i].Description 
     }); 
     marker.setMap(map); 
     attachListener(marker,'marker:'+i); 
     markersArray.push(marker); 
    } 


    //set style options for marker clusters (these are the default styles) 
    mcOptions = { 
     gridSize: 44 
    } 


    var markerCluster = new MarkerClusterer(map, markersArray, mcOptions); 
    google.maps.event.addListener(map, "tilesloaded", function() { 
     if(loop == true){ 
     SetLoop(); 
     } 
    }); 


    function attachListener(marker,content){ 
     google.maps.event.addListener(marker, "click", function() { 
     var infowindow = new google.maps.InfoWindow(); 
     map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), marker.getPosition().lng())); 
     infowindow.setContent(content); 
     infowindow.open(map,this); 
     }); 
    }  

    } 
} 


function SetLoop() { 
//This will fire everytime map loads or recenteres 
    maploaded = true; 
    if (firstload) { 
    firstload = false; 
    Recenter(); 
    } 
} 


function Recenter() { 
    //If previous iteration is not loaded completely, wait to avoid errors 
    //It could happen for slow internet connection 
    if (maploaded) { 
    maploaded = false; 
    } else { 
    //keep adding 1 second to interval for slow connection till page loads 
    interval = interval + 1; 
    setTimeout("Recenter()", interval); 
    return; 
    } 

    if (infowindow != null && currentmarker != null) { 
    //currentmarker.icon = _icon; 
    currentmarker.icon = _iconCenter; 
    currentmarker.setMap(map); 
    infowindow.close(map, currentmarker); 
    } 

    markersArray[currentPosition].icon = _iconCenter; 
    markersArray[currentPosition].setMap(map); 
    map.setCenter(new google.maps.LatLng(markersArray[currentPosition].getPosition().lat(), markersArray[currentPosition].getPosition().lng())); 

    infowindow = new google.maps.InfoWindow({ 
    content: markersArray[currentPosition].infocontent, 
    size: new google.maps.Size(50, 50) 
    }); 
    infowindow.open(map, markersArray[currentPosition]); 
    currentmarker = markersArray[currentPosition]; 
    if (currentPosition >= markersArray.length - 1) { 
    currentPosition = 0; 
    } else { 
    currentPosition++; 
    } 
    if (markersArray.length > 1) { 
    setTimeout("Recenter()", interval); 
    } 
} 

是重新使用信息窗口的最好辦法還是好這樣做另一種方式？任何幫助指出我在這裏正確的方向將非常感謝，謝謝你們！

Answer 1

從函數attachListener（）中除去'var infowindow'聲明。如果你在函數內部聲明它，它就會變成本地函數，並且你每次執行該函數時都會創建一個新的實例。所以：

function attachListener(marker,content){ 
     google.maps.event.addListener(marker, "click", function() { 

     // marker.getPosition() already returns a google.maps.LatLng() object 
     map.setCenter(marker.getPosition()); 
     infowindow.close(); 
     infowindow.setContent(content); 
     infowindow.open(map,this); 
     }); 
    }  

，而是，聲明它作爲一個全局變量：

var _icon = '/css/img/map-marker-purple.png'; 
var infowindow = new google.maps.InfoWindow(); 
//...etc 

，讓你只有一個信息窗口對象在整個應用程序