谷歌地图API 3 removeListener不工作/行为怪异

Google maps API 3 removeListener not working/acting weird

本文关键字：工作 API removeListener 谷歌地图      更新时间：2023-09-26

我的每个标记都有一个点击监听器，调用函数displayInfo，一个自定义的infoBox。。

google.maps.event.addListener(markers[i], 'click', function() {
        //stop updating markers
         google.maps.event.removeListener(updateMarkersProcess);
        //call display custom infowindow function
        displayInfo(this);
    });

我在地图上有一个bounds_change监听器，用于将自定义信息框"绑定"到标记。像这样：

function displayInfo(marker) {
 var e = $('infobox');
overlay.getPanes().floatPane.appendChild(e);
displayInfoProcess = google.maps.event.addListener(map, 'bounds_changed', function() {
    
    show('infobox');
    
    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(marker.position);
    e.style.top = markerOffset.y + 20 + 'px';
    e.style.left = markerOffset.x - 40 + 'px';
    e.innerHTML = marker.store + '<br><em>' + convertDistance(marker.distance);   
     
});
map.panTo(marker.position); 
}

然后，我在地图上有一个单击的侦听器来隐藏infoBox并停止bounds_change侦听器。。。

[在此处删除LISTENER代码]

google.maps.event.addListener(map, 'click', function() {
       google.maps.event.removeListener(displayInfoProcess);
       // google.maps.event.clearListeners(map, 'bounds_changed');
       hide('infobox');
     
    });

这隐藏了infoBox，但问题是，这似乎并没有删除侦听器。这是日志中的打印：

//单击标记（无侦听器）之前

displayInfoProcess空

//点击标记（监听器）后

displayInfoProcessUeb： qhd： "；bounds_changed"；e： 函数（）{id:1480j： nulll： 0原型：Ue

//点击地图后（静止，听众）

displayInfoProcessUeb： nulld： "；bounds_changed"；e： nullid:1480j： nulll： 0原型：Ue

让事情变得非常奇怪，如果我。

1） 点击一个标记这显示信息框1

2） 单击另一个标记这将显示infoBox2而不是1

3） 点击地图这会隐藏infoBox2

4） 平移地图

第一个标记的infoBox（1）出现！

有补救办法吗？

侦听器引用正在被删除（查看b:和e:属性，它们都为null），剩下的只是一个shell。如果在您尝试平移映射的任何时候都没有删除侦听器，那么它将快速返回到添加侦听器的标记。

由于您对displayInfoProcess事件所做的似乎只是显示信息框，因此我将使用google.maps.event.addListenerOnce（）。这将在执行侦听器后立即删除它。

function displayInfo(marker) {    
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        //set infobox info...
    });
    map.panTo(marker.position);
}

我个人不喜欢在地图上使用click事件。当用户点击地图时，他们通常试图平移地图，所以我使用dragstart、drag和dragend事件。通过使用dragstart事件，您不需要在尝试平移地图之前释放鼠标按钮。

以下是使用addListenerOnce和dragstart的示例：http://jsfiddle.net/bryan_weaver/vPN7R/

添加

if(displayInfoProcess) {google.maps.event.removeListener(displayInfoProcess);}

到displayInfo函数的开头似乎已经完成了这个技巧。

相关文章：