問題描述

要重現此問題，您可以轉到 http://leafletjs.com/ 并在 javascript 控制臺中，寫下:

To reproduce this problem, you can go to http://leafletjs.com/ and in the javascript console, write the following:

> map.getZoom()
15
> map.setZoom(10);map.setZoom(1);
Object
> map.getZoom()
10

我期待最終的 getZoom 返回 1.為什么會這樣?該問題可能與縮放動畫有關.如果在動畫結束之前調用了 setZoom，它將被忽略.

I was expecting the final getZoom to return 1. Why does this happen? The problem may be related with the zoom animation. If a setZoom is called before the animation ends, it gets ignored.

我正在將傳單與 emberjs 集成，并希望允許通過外部更改進行縮放更改.如果用戶快速更改縮放，則效果不理想.

I'm integrating leaflet with emberjs and wanted to allow zoom changes by external changes. If the user changes zoom quickly, the effect isn't the desired.

推薦答案

<代碼>L.Map.setZoom 稱為 L.Map.setView 調用 L.Map._animateZoomIfClose.如果 map._animatingZoom 為真，那么任何縮放都將停止.map._animatingZoom 像尋找縮放動畫一樣工作:

L.Map.setZoom called L.Map.setView that called L.Map._animateZoomIfClose. If map._animatingZoom is true then any zoom will stop. map._animatingZoom work like look for zoom animation:

1. 查看 L.Map._animateZoomIfClose 如果 true 停止縮放，否則調用 L.Map._animateZoom.
2. 在 處設置為 trueL.Map._animateZoom 并開始 css 過渡.
3. 在 處設置為 falseL.Map._onZoomTransitionEnd 在 css 過渡結束時.

1. Check at L.Map._animateZoomIfClose if true stop zoom else call L.Map._animateZoom.
2. Set to true at L.Map._animateZoom and start css transition.
3. Set to false at L.Map._onZoomTransitionEnd on css transition end.

為什么是這樣?我認為是因為很難打破 css 過渡工作.

Why it's as is? I think because it's difficult break css transition work.

因此，如果您要禁用任何 css 轉換和轉換，您的代碼必須能夠正常工作.您還可以添加自己的擴展:如果 map._animatingZoom === true 然后將您的操作放入數組，當 map._catchTransitionEnd 調用時處理此操作并將您的操作從數組和進程:

So if you will disable any css transform and transition your code must work right. You also can add own extension: if map._animatingZoom === true then put your action to array, when map._catchTransitionEnd called process this and shift your action from array and process:

if (L.DomUtil.TRANSITION) {
    L.Map.addInitHook(function () {
        L.DomEvent.on(this._mapPane, L.DomUtil.TRANSITION_END, function () {
            var zoom = this._zoomActions.shift();
            if (zoom !== undefined) {
                this.setZoom(zoom);
            }
        }, this);
    });
}

L.Map.include(!L.DomUtil.TRANSITION ? {} : {
    _zoomActions: [],
    queueZoom: function (zoom) {
        if (map._animatingZoom) {
            this._zoomActions.push(zoom);
        } else {
            this.setZoom(zoom);
        }
    }
});

這篇關于為什么調用傳單的 setZoom 兩次導致第二次被忽略?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！