Google Maps API 标记点击事件未触发 [重复]

Posted

技术标签:

【中文标题】Google Maps API 标记点击事件未触发 [重复]【英文标题】:Google Maps API marker click event not firing [duplicate] 【发布时间】:2015-03-06 22:50:41 【问题描述】:

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

/*
* 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】:

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

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

【讨论】:

确实是这个问题,感谢您的快速响应。我会接受的。【参考方案2】:

您可能应该创建一个函数,它接受标记作为参数,并在 for 循环中调用该函数,并将当前标记作为参数传递。

function addListner(marker)

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

并在循环内调用函数。

在 for 循环外引用标记时,没有引用它所指的标记。您需要为每个标记单独分配一个侦听器。

【讨论】:

以上是关于Google Maps API 标记点击事件未触发 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Ionic 2 - Google Maps Native:标记点击事件未触发

Google Maps API实施点击事件以获取目标元素

如何在 Google Maps V3 上触发标记的 onclick 事件?

Google Maps API点击网址事件无效

在 Google Maps API v2 中收听我的位置图标点击事件

Google Maps Api v3 - 查找最近的标记