在Google Maps API V3中,标记(Marker)是地图上用于标识特定位置的点。为标记添加事件监听器可以响应用户与标记的交互,如点击、鼠标悬停等。
// 创建标记
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
map: map,
title: 'Hello World!'
});
// 添加点击事件监听器
marker.addListener('click', function() {
alert('Marker clicked!');
});
当有多个标记时,可以使用数组存储标记,然后循环为每个标记添加监听器:
// 创建标记数组
var markers = [];
// 添加多个标记
for (var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({
position: {lat: -34.397 + i*0.01, lng: 150.644 + i*0.01},
map: map,
title: 'Marker ' + i
});
// 将标记添加到数组
markers.push(marker);
// 为每个标记添加事件监听器
marker.addListener('click', function() {
alert('Marker ' + i + ' clicked!');
});
}
上面的例子中,所有点击事件都会显示"Marker 10 clicked!",因为循环结束后i的值是10。可以使用闭包解决:
for (var i = 0; i < 10; i++) {
(function(index) {
var marker = new google.maps.Marker({
position: {lat: -34.397 + index*0.01, lng: 150.644 + index*0.01},
map: map,
title: 'Marker ' + index
});
marker.addListener('click', function() {
alert('Marker ' + index + ' clicked!');
});
markers.push(marker);
})(i);
}
for (let i = 0; i < 10; i++) {
var marker = new google.maps.Marker({
position: {lat: -34.397 + i*0.01, lng: 150.644 + i*0.01},
map: map,
title: 'Marker ' + i
});
marker.addListener('click', function() {
alert('Marker ' + i + ' clicked!');
});
markers.push(marker);
}
除了'click',还可以监听以下事件:
原因:标记可能没有正确添加到地图上 解决:确保创建标记时指定了map属性或调用了setMap()方法
原因:循环中使用var导致变量提升 解决:使用闭包或let关键字为每个标记创建独立的作用域
原因:未移除不再使用的标记和事件监听器 解决:移除标记时调用setMap(null),并考虑使用removeListener()移除事件监听器
没有搜到相关的文章