Question

我的每个标记都有一个点击监听器，调用函数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 监听器......

[在此删除听众代码]

google.maps.event.addListener(map, 'click', function() {

       google.maps.event.removeListener(displayInfoProcess);
       // google.maps.event.clearListeners(map, 'bounds_changed');
       hide('infobox');

    });

这隐藏了infoBox，但事实是，这似乎并没有删除监听器。这是日志中的打印件：

//点击标记之前（没有听众）

displayInfoProcess 空

//点击标记（听众）后

displayInfoProcess UE b：qh d：“bounds_changed” e：function（）{ id：1480 j：null l：0 proto ：呃

//点击地图（仍然是听众）

displayInfoProcess UE b：null d：“bounds_changed” e：null id：1480 j：null l：0 proto ：呃

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

1）点击一个标记 这显示了infoBox1

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

3）点击地图 这隐藏了infoBox2

4）平移地图

..来自FIRST标记的infoBox（1）显示!!

有补救措施吗？

Answer 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/

的示例

Answer 2

添加

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

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

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

2 个答案: