谷歌地图API V3 fitBounds调用后zoom_changed事件触发了两次

Question

谷歌地图API V3 fitBounds调用后zoom_changed事件触发了两次

javascriptgoogle-mapseventsgoogle-maps-api-3

6

我正在开发一个与谷歌地图集成的Web应用程序，但是在调用fitBounds后，zoom_changed事件会触发两次。我唯一涉及到fitBounds的引用是在updateMap中。我唯一附加事件侦听器的时间是在createMap中。

第二次调用缩放更改处理程序会导致另一个触发更新地图的操作。

我已经阅读了这篇文章：不要在调用地图上的fitBounds函数时触发“zoom_changed”事件，标志对于第一个事件运作正常。但为什么还有另一个zoom_changed事件被触发？

更好的办法是，如何防止第二个zoom_changed事件的触发？

这是我在控制台日志中看到的内容：

updateMap, fitbounds: 0
calling fitbounds...
zoom changed
mapEventHandler, fitbounds: 1
zoom changed
mapEventHandler, fitbounds: 0

这是我的更新地图功能的代码，其中调用了fitBounds：

var mapZoomOrDragEventInProgress = false;
var fitBoundsCalledCount = 0;
var map = null;

updateMap = function () {
    console.log("updateMap, fitbounds: " + fitBoundsCalledCount);

    var bounds = fitBoundsForVenues();

    deleteAndUpdateMarkers();

    if (!mapZoomOrDragEventInProgress) {
        bn.spg.map.vars.fitBoundsCalledCount++;
        if (markers.length > 1) {
            console.log("calling fitbounds...");
            map.fitBounds(bounds);
        } else {
            console.log("setting zoom...");
            map.setCenter(bounds.getCenter());
            map.setZoom(13);
        }
    }

    mapZoomOrDragEventInProgress = false;
}

这是我的创建地图函数：

createMap = function() {
    if (map === null) {
        var bounds = fitBoundsForVenues();

        var mapOptions = {
            center: bounds.getCenter(),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        google.maps.event.addListener(map, 'zoom_changed', zoomChangedEventHandler)
        google.maps.event.addListener(map, 'dragend', dragendEventHandler);
     }
}

这是我的事件处理程序：

zoomChangedEventHandler = function () {
    console.log("zoom changed");
    console.log("mapEventHandler, fitbounds: " + fitBoundsCalledCount);

    //we want to handle only user zoom events, NOT zoom_events triggered from fit bounds or set_zoom
    if (fitBoundsCalledCount === 0) {
        mapZoomOrDragEventInProgress = true;
        var coords = getViewportCoordinates();
        updateVenuesAndMapAsync(coords.lat, coords.lng, coords.radius);
    } else {
        fitBoundsCalledCount--;
    }
}

- bluce

你能给我们提供一个演示或页面链接吗？ - Dr.Molle

很遗憾，我不能这样做。这个项目仍在开发中。我目前的理论是可能我们已经将两个点击处理程序附加到显示地图的链接上。如果事实证明不是这种情况，那么除了fitBounds确实会触发两个事件之外，我就不知道还有什么其他原因了。 - bluce

1

遇到了同样的问题。这是我找出来的。fitBounds() 尝试将给定的边界框适应于地图视口。它还相应地更改地图的缩放级别。当边界框彼此之间非常远时，fitBounds() 无法设置缩放级别，因为它低于最小缩放限制。所以它将缩放级别设置为零。这会导致 zoom_changed 触发两次。 - M Hussain

谢谢@MHussain，解决了我的疑惑。 - ColorWin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

我无法告诉你第二次zoom_changed事件是在哪里被触发的（我确定单次调用fitBounds()不是原因）

但是，与其使用这些计数器，我建议在updateMap()开始时删除zoom_changed侦听器，并在updateMap()结束时重新分配侦听器。