Javascript 如何使用 Google Maps API 在标记上设置弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11467070/
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
How to set a popup on markers with Google Maps API?
提问by whoah
I have this code where I display and set all my markers. How can I add a popup with some information on markers with this code? I add "i" variable on text, but it sets on all markers popup with "test - 723", where 723 is last value of the "i" variable. What is wrong?
我有这个代码，用于显示和设置我的所有标记。如何使用此代码添加包含有关标记的一些信息的弹出窗口？我在文本上添加了“i”变量，但它在所有标记弹出窗口中设置了“test - 723”，其中 723 是“i”变量的最后一个值。怎么了？
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i])
});
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('test: ' + i + '');
infowindow.open(map, this);
});
markers.push(marker);
}
回答by Heitor Chang
First, change the loop condition to i < arraylng.length. Right now it is not capturing the last element of your array.
首先，将循环条件更改为i < arraylng.length。现在它没有捕获数组的最后一个元素。
JavaScript variables works with function scope so you need to call a function for each marker listener to create the correct variable references. You can use an anonymous function, as seen here, or define a function for creating the click listener:
JavaScript 变量与函数作用域一起工作，因此您需要为每个标记侦听器调用一个函数以创建正确的变量引用。您可以使用匿名函数，如下所示，或定义一个函数来创建点击侦听器：
Multiple infoWindows:
多个信息窗口：
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
Most likely you will not want more than one InfoWindow open at the same time, because it is annoying to have to click on the close x. Then you will only want one InfoWindow object, and set the content as the marker is clicked:
很可能您不希望同时打开多个 InfoWindow，因为必须单击 close 很烦人x。那么您将只需要一个 InfoWindow 对象，并在单击标记时设置内容：
Single InfoWindow:
单个信息窗口：
...
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i]),
map: map
});
makeInfoWindowEvent(map, infowindow, "test" + i, marker);
markers.push(marker);
}
}
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
回答by user3635230
var marker = new google.maps.Marker({
position: myLatLng,
....
content: point[4]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
Code inside loop. This worked for me perfectly.
循环内的代码。这对我来说非常有效。
回答by Rishabh Jhalani
this is the area where you can add your content of popup
这是您可以添加弹出内容的区域
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
and this is for showing your popup
这是用于显示您的弹出窗口
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Below code shows how its work and use.
下面的代码显示了它是如何工作和使用的。
features.forEach(function(feature) {
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
icon: "image.png",
/*icon: icons[feature.type].icon,*/
title: "Title for marker",
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});回答by dda
That's because the variable iis not used in the loop but when the marker is clicked -- and then i is equal to the last index + 1... The addListeneris asynchronous, not synchronous.
那是因为变量i没有在循环中使用，但是当标记被点击时——然后 i 等于最后一个索引 + 1......这addListener是异步的，不是同步的。
Remove infowindow.setContent('test: ' + i + '');and replace content: " "with content: 'test: ' + i. This should fix your problem.
删除infowindow.setContent('test: ' + i + '');并替换content: " "为content: 'test: ' + i。这应该可以解决您的问题。
