Google 地图 API 标记点击事件未触发

Question

以下代码的问题在于没有触发点击事件。标记按预期出现在地图上，但单击时，控制台中没有显示任何内容。我已经搜索了一段时间，但我找到的所有答案都与我的代码无关。

/*
* 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);

我不知道问题出在哪里，因为没有错误，而且我似乎找不到问题...

编辑： 当我刷新页面并缩小时，加载了一个不可见的标记，只有那个标记响应点击事件。

Answer 1

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

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');        
    });
};

Answer 2

您或许应该创建一个函数，它接受标记作为参数，并从 for 循环本身内部调用该函数，将当前标记作为参数传递。

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

并在循环内调用函数。

虽然在 for 循环之外引用标记，但没有引用它所引用的标记。您需要为每个标记单独分配一个侦听器。

Google 地图 API 标记点击事件未触发

Google Maps API marker click event not firing

javascript

google-maps-api-3

addeventlistener