javascript - google maps api v3 zoom_changed 事件在调用 fitBounds 后触发了两次

标签 javascript google-maps events google-maps-api-3

我正在开发一个与谷歌地图集成的网络应用程序,我遇到了调用 fitBounds 后两次触发 zoom_changed 事件的问题。我对 fitBounds 的唯一引用是在 updateMap 中。我唯一一次附加事件监听器是在 createMap 中。

对缩放更改处理程序的第二次调用导致另一个触发器更新 map 。

我已经读过这篇文章:Do not fire 'zoom_changed' event when calling fitBounds function on map

该标志在第一个 事件中工作正常。但为什么会触发另一个 zoom_changed 事件?

更妙的是,如何防止触发第二个 zoom_changed 事件?

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

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

这是调用 fitBounds 的更新 map 函数的代码:

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

这是我的创建 map 函数:

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

最佳答案

我不能告诉你第二次 zoom_changed-even 是在哪里被触发的(我确定 fitBounds() 的一次调用不是原因)

但我不建议使用这些计数器,而是建议在 updateMap() 开始时删除 zoom_changed-listener,并在结束时重新分配 listener updateMap()

关于javascript - google maps api v3 zoom_changed 事件在调用 fitBounds 后触发了两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20436185/

相关文章:

javascript - 从 ng-include html 访问元素

javascript - 用户浏览器缩放时如何处理覆盖

android - 将我的位置标记显示在所有其他标记之上

google-maps - 如果点击事件监听器创建的标记,则Google Maps拖拽事件监听器将不起作用

javascript - 更改文档准备好时由 ajax 填充的选择的选定值?

javascript - 使用 Javascript 如何找到嵌套在空数组中的对象的路径?

javascript - webpack 将其输出放在哪里供 webpack 开发服务器使用?

iphone - 如何通过网络链接在 iPhone 上启动 Google map ?

.net - 我想在 C# 构建期间运行脚本,但**仅当项目不是最新时**

javascript - 是什么决定了使用 promises 或 setTimeout 的延迟函数的调用顺序?