[英]Google maps infowindow showing on wrong marker
我有一段javascript代码,我在其中创建标记并将InfoWindows附加到它们,如下所示:
for (var i = 0; i < 8; i++) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat[i], lng[i]),
icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
});
var infowindow = new google.maps.InfoWindow({
content: 'test string'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
但是当我点击其中一个标记时,infowindow总是只显示在一个标记上。 我究竟做错了什么?
对你的问题有一个非常简单的解决方案,即将循环代码放入函数中。 您的问题是您覆盖变量marker
,以便在单击事件中访问它时,它使用该变量的最新版本,这是您添加的最后一个标记。
因此,当您将其放入函数时,该变量位于单独的命名空间中,因此不会被覆盖。 换句话说,这应该工作:
for (var i = 0; i < 8; i++) {
createMarker(i);
}
function createMarker(i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
});
var infowindow = new google.maps.InfoWindow({
content: 'test string'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addListener(Marker, 'click', function() {
InfoWindow.open(map, this);
});
您应该使用此而不是标记,因为标记将保留最后放置的标记的值。
for (var i = 0; i < 8; i++) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat[i], lng[i]),
icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
content: 'test string'
});
google.maps.event.addListener(marker, 'click', function() {
new google.maps.InfoWindow({
content: this.content
}).open(map, this);
});
}
作为7年前无法使用的新选项:
所有现代浏览器(所有支持ECMAScript 6的浏览器)都支持使用let
语句定义的块作用域变量。 let
初始化给定范围内的变量,例如循环内部,而var
定义全局或函数级别的变量。 在你的情况下,用let
交换var
将确保每个标记被正确初始化为一个新变量:
for (var i = 0; i < 8; i++) {
let marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat[i], lng[i]),
icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
});
let infowindow = new google.maps.InfoWindow({
content: 'test string'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
试试这个:
// Create a marker for each place.
marker = new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
animation: google.maps.Animation.DROP,
position: place.geometry.location
});
var infowindow = new google.maps.InfoWindow({
content:'<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>'
});
marker.addListener('click', function() {
infowindow.open(map, this);
});
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.