我有一段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
,因此当在click事件中访问它时,它会使用该变量的最新版本,这是您添加的最后一个标记。
因此,当您将其放入函数时,该变量位于单独的命名空间中,因此不会被覆盖。换句话说,这应该工作:
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);
});
}
试试这个:
// 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);
});
谢谢
作为7年前无法使用的新选项:
所有现代浏览器(所有支持ECMAScript 6的浏览器)都支持使用let
语句定义的块范围变量。 let
初始化给定范围内的变量,例如在循环内部,而var
在全局或函数级别定义变量。在你的情况下,用var
交换let
将确保每个标记被正确初始化为一个新变量:
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);
});
}