Google Maps API v3 - 標記全部共享相同InfoWindow

我一直在到處挖掘，我似乎無法弄清楚這一點。這讓我瘋狂！我一般都是JavaScript的新手，所以我不能很好地指出翻譯能夠解決我的問題。我注意到很多人都有這個問題，但他們似乎都比我更先進（或只是混淆）的代碼。無論如何，這裏就是！Google Maps API v3 - 標記全部共享相同InfoWindow

我一直有問題，我所有的標記共享相同的內容。

function initialize() { 
var myOptions = { 
    center: new google.maps.LatLng(34.151271, -118.449537), 
    zoom: 9, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    streetViewControl: false, 
    panControl: false, 
    zoomControl: true, 
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

setMarkers(map, clubs); 

} 

var clubs = [ 
['Poop', 34.223868, -118.601575, 'Dookie'], 
['Test Poop', 34.151271, -118.449537, 'Test Business'] 
]; 

function setMarkers(map, locations) { 
var image = new google.maps.MarkerImage('images/image.png', 
    new google.maps.Size(25, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32) 
); 
var shape = { 
coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
type: 'poly' 
}; 
for (var i = 0; i < locations.length; i++) { 
var club = locations[i]; 
var myLatLng = new google.maps.LatLng(club[1], club[2]); 
var infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image, 
    shape: shape, 
    title: club[0], 
}); 
google.maps.event.addListener(marker, 'click', function(){ 
    infowindow.setContent(club[3]); 
    infowindow.open(map, this); 
}); 
} 
}

我知道我很糟糕，但有人請幫助我！：P

來源

2012-02-28 Mikey

問題是因爲您正在爲循環內的標記點擊設置事件偵聽器。因此，所有標記最終只會獲得最後一個標記的內容。試試這個。創建一個新的全球功能：

function bindInfoWindow(marker, map, infowindow, html) { 
    marker.addListener('click', function() { 
     infowindow.setContent(html); 
     infowindow.open(map, this); 
    }); 
}

那麼你的循環中，替換此：

google.maps.event.addListener(marker, 'click', function(){ 
    infowindow.setContent(club[3]); 
    infowindow.open(map, this); 
});

與此：

// add an event listener for this marker 
bindInfoWindow(marker, map, infowindow, club[3]);

來源

2012-02-28 10:42:20 duncan

謝謝鄧肯！精美的作品，需要2秒鐘修復。你是男人！ – Mikey 2012-03-02 21:10:36

@duncan非常感謝！ – Luftwaffe 2015-07-09 12:49:58

嗨，大家好，這個解決方案也適合我，非常感謝。不過，我想了解爲什麼它以這種方式工作，而不是另一種？我們仍然在循環中綁定了監聽器，但是現在這個代碼被封裝在一個函數中。爲什麼會有所作爲？謝謝！ – WPalombini 2015-11-25 00:55:57

當設置標記對象（var marker = new ...）時，將下面這一行改爲：「title：club [0]」到「title：club [i]」。是的，只需將0改爲i即可。

這應該解決問題。

嘗試此鏈接以獲取有關Google Maps API的教程和示例。

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

這應該是很容易的和有益的。

來源

2012-02-28 09:25:26 Yaztown

當我試圖取代 '0' '我' 它刪除了我的最後一個標記，並使它們都沒用。 '0'是指我的標記的名稱。 – Mikey 2012-03-02 21:11:14

Google Maps API v3 - 標記全部共享相同InfoWindow

回答

相關問題