谷歌地圖3：當任何標記點擊相同的infoWindow打開時

Question

我的谷歌地圖上有幾個標記。 每個都有文本，應該顯示何時以infowindow的形式點擊它。 所有這些的代碼如下。 Hwever，問題在於，當我點擊地圖上的任何標記時，它總是與地圖放大的標記相同，並且彈出相同標記的infoWindow。 無論我在哪里點擊它總是一樣的。

想知道我是否做錯了。 有人可以給我一些建議嗎？

  function getlistings()  
   {  
     $.getJSON('list/listings.json', processlistings);  
   }  



function processlistings(data)   
{  
    listings = data;  
    markersArray = [];  
    for( i = 0; i < listings.length; i++)   
    {  
        var listing = listings[i];  
        var markerLatLng = new google.maps.LatLng(parseFloat(listing["latitude"]), parseFloat(listing["longitude"]));  
        marker = new google.maps.Marker({  
            position : markerLatLng,  
            title: listing['name'],  
            map : map  
        });  

    var infowindow = new google.maps.InfoWindow(  
        {  
          content: listing['name'],  
          position: markerLatLng  
        });  

    google.maps.event.addListener(marker, 'click', function()   
    {  
        infowindow.open(map);  

    });  

    markersArray.push(marker);  
}  

}

Answer 1

當您遍歷數據時，您將多次創建InfoWindow 。 在循環結束時，您在markerLatLng處有一個InfoWindow 。

單擊標記時，將調用markerLatLng infowindow.open() ，它在markerLatLng使用markerLatLng 。

您需要使用函數閉包，如http://www.geocodezip.com/v3_MW_example_map1.html所示。

//loop through markers, but create each with a helper function
          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker = createMarker(point,'Some stuff to display in the<br>Third Info Window')

    function createMarker(latlng, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
            });
    }

Answer 2

當您遍歷列表時，您將覆蓋infowindow var內容。 相反，您需要更改單擊以將內容設置為this.title

var infoWindow = new google.maps.InfoWindow({content: 'Loading...'});;    
function processlistings(data)   
    {  
        listings = data;  
        markersArray = [];  
        for( i = 0; i < listings.length; i++)   
        {  
            var listing = listings[i];  
            var markerLatLng = new google.maps.LatLng(parseFloat(listing["latitude"]), parseFloat(listing["longitude"]));  
            marker = new google.maps.Marker({  
                position : markerLatLng,  
                title: listing['name'],  
                map : map  
            });  

        markersArray.push(marker);  
        } 
        for (var i = 0; i < markersArray.length; i++) {
            var marker = markersArray[i];
            google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent(this.title);
            infoWindow.open(map, this);
            });
        }
    }