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

我的項目使用JSON訂閱源來獲取有關指定緯度和經度邊界內的地震的信息，實質上是製作一個框。我將這些信息轉化爲Google地圖上的標記。我需要每個標記還顯示一些額外的信息，所以我試圖使用內置的信息窗口對象，例如，當你點擊你打開提示與該標記相關的一些信息的標記。然而，我發現無論我點擊什麼標記，同一個infowindow總是出現在該組的同一個標記之上，我相信它始終是我循環中創建的最後一個infowindow。這是代碼。嘗試將多個InfoWindows綁定到Google Map上的多個標記並且失敗

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

標記是用於在地圖和工具提示上的所有標記的對象的陣列是另一個數組用於存儲信息窗口對象。他們是全球性的。

來源

2010-03-01 Mathias Schnell

這是由於閉包工作（標記由參考封過去了，你希望是複印件）。但是，當監聽器被調用，它會隨着'this'參照對象（標記），向其中加入監聽，所以你可以使用'的this'代替'marker'。 – herman 2014-07-30 12:34:49

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

正在發生的事情是，你的點擊事件被異步調用，它是拿起在回調的getJSON標記變量的當前值（最後一個列表）。

你需要使一個封閉是圍繞在點擊回調所使用的標記變量，創建來包裝你的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回調調用listenMarker（其中你正在調用addListener）。

來源

2010-03-01 22:51:08 RedBlueThing

感謝您使用這個簡單明瞭的解決方案。使用infowindow，您可以將更多參數傳遞給函數以添加更多內容。 – dwarbi 2011-08-05 03:30:51

-1：雖然這是有效的，但並不是必須的，因爲'this'將引用偵聽器添加到的對象。 – herman 2014-07-30 12:32:26

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

來源

2010-09-23 19:50:17 notreadbyhumans

你也可以這樣做：

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

其中「標記」是替換爲「本」，在添加監聽通話。因此，您可以將addListerner代碼放置在創建標記的同一點，而不必創建新函數。

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

檢查出完整的解決方案和演示：d

來源

2012-03-26 13:13:43

太棒了！謝謝！ – DDelgro 2017-09-19 17:29:52

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

回答

相關問題