[英]Google Maps API InfoWindow tied to last marker
I'm trying to add an info window to each marker I put on the map. 我正在尝试向放置在地图上的每个标记添加一个信息窗口。 The info window is only displaying the last added marker.
信息窗口仅显示最后添加的标记。 I have tried the other solutions on here but none have been working.
我在这里尝试了其他解决方案,但没有一个在工作。 Currently I'm doing this with the following code:
目前,我正在使用以下代码执行此操作:
(offending code starts halfway through at the comment //WORK IN PROGRESS) (有问题的代码从注释的一半开始//正在进行中)
function placeMarker(data, map){ var lati, lngi, title, details; var image = 'image.png'; for(i=0; i < data.length; i++){ console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType); if(data[i].eventName != ""){ title = data[i].eventName; } if(data[i].eventDetails != ""){ details = data[i].eventDetails; } if(data[i].eventLocation == "Location 1"){ lati = -29.651409; lngi = 82.342909; } else if(data[i].eventLocation == "Location 2"){ lati = -29.637712; lngi = 82.368024; } else if(data[i].eventLocation == "Location 3"){ lati = -29.650533; lngi = 82.342684; } else{ lati = -29.645793; lngi = 82.347717; console.log(data[i].eventLocation + " not found"); } // WORK IN PROGRESS var infowindow = new google.maps.InfoWindow({ content: details }); newMarker = new google.maps.Marker({ position: {lat: lati, lng: lngi}, title : title, map: map, icon: image, details: details }); newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed infowindow.open(map, newMarker); }); } } function initMap(data) { var uluru = {lat: -29.643220, lng: 82.350427}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: uluru }); // Marker Images var centerMarker = new google.maps.Marker({ position: {lat: -29.643894, lng: 82.354748}, map: map, icon: image3 }); placeMarker(data, map); }
Trying to find a solution has let me to displaying the last info entered on every marker, but not the correct info for the corresponding marker. 试图找到解决方案让我显示了在每个标记上输入的最后一个信息,但没有显示相应标记的正确信息。 I changed this to this:
我将其更改为:
newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed infowindow.open(map, newMarker); });
google.maps.event.addListener(newMarker, 'click', function() { //needs some work to connect to each marker instead of last one placed infowindow.open(map, this); });
Try placing it this way, defining this function before your loop: 尝试以这种方式放置它,在循环之前定义此函数:
var assignListener = function(markerObj, infoWindowObj){
return function() {
infoWindowObj.open(map, markerObj);
};
};
Then add the listeners via that function: 然后通过该函数添加侦听器:
newMarker.addListener('click', assignListener(newMarker, infowindow) );
try my modification.. I can't debug your end but let me know if that works... if not, I guess that will help you to see the way that I use to iterate the loop and then fill empty array with all marker info, details etc and attach that event to maps.. 尝试我的修改。.我无法调试您的终端,但是让我知道它是否有效...如果没有,我想这将帮助您了解迭代循环然后用所有标记填充空数组的方式信息,详细信息等,然后将该事件附加到地图上。
var infoWindow = new google.maps.InfoWindow;
// open info window
var onMarkerClick = function() {
var marker = this;
infoWindow.setContent( marker.details );
infoWindow.open(map, marker);
mkmap.lastmarkeropened = marker;
};
// close the info window
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
var marker = [] ;
// loop start
for(i=0; i < data.length; i++){
console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType);
if(data[i].eventName != ""){
title = data[i].eventName;
}
if(data[i].eventDetails != ""){
details = data[i].eventDetails;
}
if(data[i].eventLocation == "Location 1"){
lati = -29.651409;
lngi = 82.342909;
}
else if(data[i].eventLocation == "Location 2"){
lati = -29.637712;
lngi = 82.368024;
}
else if(data[i].eventLocation == "Location 3"){
lati = -29.650533;
lngi = 82.342684;
}
else{
lati = -29.645793;
lngi = 82.347717;
console.log(data[i].eventLocation + " not found");
}
marker[ i ] = new google.maps.Marker({
position: {lat: lati, lng: lngi},
title : title,
map: map,
icon: image,
details: details
});
// attach event to open info window
google.maps.event.addListener(marker[ i ], 'click', onMarkerClick );
} // end loop
see if this works.. 看看是否可行。
cheers, K 欢呼声,K
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.