javascript 谷歌地图 API v3 - 添加多个信息窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30012913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map API v3 - Add multiple infowindows
提问by Russ
I've got a workingsection of google maps javascript, I did have a problem.
我有一个谷歌地图 javascript的工作部分，我确实遇到了问题。
Now the issue I had was that only one infowindow was showing up, the last. I found a solution on another stack thread that worked out. But I couldn't really work out why. I'm fairly new to Javascript so I was hoping someone could explain to me what changed and how.
现在我遇到的问题是只显示了一个信息窗口，最后一个。我在另一个堆栈线程上找到了一个解决方案。但我真的不明白为什么。我对 Javascript 还很陌生，所以我希望有人可以向我解释发生了什么变化以及如何变化。
Here is the working code:
这是工作代码：
function setMarkers(map, locations){
for(var i = 0; i < locations.length; i++){
var marker = locations[i];
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var content = locations[i][0];
var infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position:latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function(content){
return function(){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(content));
}
}
Here is the original broken code was (I'll paste only that which changed):
这是原始损坏的代码（我将仅粘贴更改的代码）：
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
Now what I'd like to know if you'd be so kind, is:
现在我想知道你是否会这么好，是：
what function does the return fn serve, and
what does the added
(content)at the end ofaddListener(}(content));)do since as far as I can see the content has already been set within thesetContentproperty.
return fn 的作用是什么，以及
(content)末尾添加addListener(}(content));)的内容有什么作用，因为据我所知，内容已经在setContent属性中设置了。
Thank-you!
谢谢！
回答by Roko C. Buljan
Don't loop your infowindow...
You need only one instanceof the infowindowobject.
Move it outsideof the loop, same for your functions.
Inside the loop assign its content as relativeto the clicked marker
不要循环你infowindow......
你只需要一个实例中的infowindow对象。
将它移到循环之外，对于您的函数也是如此。
在循环内部将其内容分配为相对于单击的marker
const locations = [
{lat: 45.840196, lng: 15.964331, name: "Zagreb"},
{lat: 43.514851, lng: 16.449083, name: "Split"},
{lat: 42.645725, lng: 18.094058, name: "Dubrovnik"},
];
function initGoogleMap(){
const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
const map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: new google.maps.LatLng(45, 15)
});
function placeMarker( loc ) {
const marker = new google.maps.Marker({
position : new google.maps.LatLng( loc.lat, loc.lng ),
map : map
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.close(); // Close previously opened infowindow
infowindow.setContent(`<div id="infowindow">${loc.name}</div>`);
infowindow.open(map, marker);
});
}
// ITERATE ALL LOCATIONS. Pass every location to placeMarker
locations.forEach( placeMarker );
}
google.maps.event.addDomListener(window, 'load', initGoogleMap);html, body, #map-canvas { height: 100%; margin: 0px; }
#infowindow{ padding: 10px; }<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>回答by Dino Reic
For some reason, I had to modify marker object and access that data inside event lisener function.
出于某种原因，我不得不修改标记对象并在事件侦听器函数中访问该数据。
Scope of click event fuction on marker is marker object.
标记上点击事件的作用范围是标记对象。
var infowindow = new google.maps.InfoWindow();
for(int i = 0; i < locations.length; i++){
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var contentString = locations[i][0];
marker = new google.maps.Marker({
position: latLng,
map: map,
contentString: contentString
});
marker.data = locations[i]; // adds object to marker object
marker.addListener('click', function() {
// read custom data in this.data
infowindow.setContent("<div id='infowindow'>"+ this.data[0] +"</div>");
infowindow.open(map, this);
map.setCenter(this.getPosition());
});
}
