問題描述

要重現(xiàn)此問題，您可以轉(zhuǎn)到 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.為什么會這樣?該問題可能與縮放動畫有關(guān).如果在動畫結(jié)束之前調(diào)用了 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 調(diào)用 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 停止縮放，否則調(diào)用 L.Map._animateZoom.
2. 在 處設(shè)置為 trueL.Map._animateZoom 并開始 css 過渡.
3. 在 處設(shè)置為 falseL.Map._onZoomTransitionEnd 在 css 過渡結(jié)束時.

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 轉(zhuǎn)換和轉(zhuǎn)換，您的代碼必須能夠正常工作.您還可以添加自己的擴展:如果 map._animatingZoom === true 然后將您的操作放入數(shù)組，當 map._catchTransitionEnd 調(diào)用時處理此操作并將您的操作從數(shù)組和進程:

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

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