关于javascript：Google Maps API标记点击事件未触发

Google Maps API marker click event not firing

本问题已经有最佳答案，请猛点这里访问。

以下代码的问题是未触发click事件。标记按预期显示在地图上，但单击时，控制台中不会显示任何内容。我一直在寻找一段时间，但我找到的所有答案都与我的代码无关。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
* Connect to Google API, load map and markers
*/
function drawMarkers(markerInfo) {
var mapOptions = {
center: { lat: 50.601079, lng: 4.4764595},
zoom: 8,
scrollwheel: false,
styles: style
};

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];

var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
};

google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});

};

google.maps.event.addDomListener(window, 'load', getmarkerInfo);

我不知道问题是什么，因为没有错误，我似乎无法找到问题......

编辑：当我刷新页面然后我缩小，所以一个标记，虽然尚未加载，但只有那个响应了点击事件。

您只需将侦听器添加到最后一个标记，将侦听器附加到循环中，您将把事件附加到每个标记。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];

var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};