嘗試將多個InfoWindows綁定到Google地圖上的多個標記並失敗

Question

我的項目使用JSON提要來獲取有關指定緯度和經度邊界內地震的信息，基本上是制作一個方框。 我獲取此信息並將所有結果轉換為Google地圖上的標記。 我需要每個標記也顯示一些額外的信息，所以我試圖使用內置的InfoWindow對象，這樣當你點擊一個標記時，你打開工具提示，其中包含與該標記相關的一些信息。 然而，我發現無論我點擊什么標記，同一個infowindow總是出現在該組的同一個標記之上，我相信它總是在我的循環中創建的最后一個infowindow。 這是代碼。

$.getJSON(url, function(json) {
                    for(var i = 0; i < json.earthquakes.length; i++)
                    {
                        var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng);
                        var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng;
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: pos,
                            title: json.earthquakes[i].eqid
                        })
                        var tooltip = new google.maps.InfoWindow({
                            content: info
                        })
                        google.maps.event.addListener(marker, 'click', function() {
                            tooltip.open(map, marker);
                        });
                        markers.push(marker);
                        tooltips.push(tooltip);
                    }               
                });

markers是地圖上所有標記對象的數組，工具提示是另一個用於存儲infowindows對象的數組。 他們是全球性的。

Answer 1

這是google-maps標簽中一個非常常見的問題，很容易犯錯:)。

發生的事情是你的click事件被異步調用，它正在getJSON回調中的marker變量中獲取當前值（列表中的最后一個）。

您需要在函數中包裝addListener調用，以便圍繞在單擊回調中使用的標記變量創建閉包：

function listenMarker (marker)
{
    // so marker is associated with the closure created for the listenMarker function call
    google.maps.event.addListener(marker, 'click', function() {
                        tooltip.open(map, marker);
                    });
}

然后從主getJSON回調（當前正在調用addListener）調用listenMarker。

Answer 2

你也可以這樣做：

// so marker is associated with the closure created for the listenMarker function call
google.maps.event.addListener(marker, 'click', function() {
                    tooltip.open(map, this);
                });

其中“標記”在添加偵聽器調用中替換為“this”。 因此，您可以將addListerner代碼放在創建標記的同一點，而不必創建新函數。

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

查看完整的解決方案和演示：D

Answer 3

將addListener調用放入其自己的函數中也解決了多個infowindows都顯示相同文本的問題。