使用 Leaflet 加载页面时多次触发 moveend 事件

Question

当 map 被平移或缩放时，我需要做一些操作，所以我在事件moveend上附加了一个回调。

map.on('moveend', function() {
    // code stuff
});

它工作正常，但是当页面加载时，事件被触发了 3 次，我不知道为什么。 可能是因为在创建过程中 map 被移动了。

为了避免这种情况，我尝试在订阅 moveend 事件之前等待加载事件，但没有任何改变。 所以我尝试将它附加到whenReady回调中，但它又被触发了 3 次。

map.whenReady(function() {
    map.on('moveend', function() {
        // code stuff
    });
});

最后，我发现在调整大小事件之后它工作得很好： moveend只被触发一次。 但我真的相信有一个最好的方法来解决这个问题。

另一种解决方案可能是将我的回调附加到事件zoomend和dragend ，以涵盖平移和缩放情况。 但我没有找到办法。

谢谢您的帮助。

Answer 1

我找到的最佳解决方案是将回调附加到两个事件：

    map.on('zoomend', function() {
        // callback
    });

    map.on('dragend', function() {
        // callback
    });

虽然这种方式有点复制，但这是迄今为止最好的解决方案。

Answer 2

对于其他人，请研究invalidateSize函数中的options.debounceMoveend选项。 它在文档中简要提到过 ，但遗憾的是它看起来只适用于该函数，而不是通常用于moveend事件。

[...]如果options.debounceMoveend为true ，它将延迟moveend事件，以便即使连续多次调用该方法也不会经常发生。

参考源代码中的行（L3541）

Answer 3

您可以使用mouseenter和mouseleave事件。 例子：

block.addEventListener('mouseenter', ()=>{
    //some code when hover
})

block.addEventListener('mouseleave', ()=>{
    // some code when leaving block
})

链接到 developer.mozilla.org

Answer 4

'zoomend' 和 'dragend' 选项对我不起作用。 我搜索了很多合适的选项，并意识到“moveend”事件会触发多次，因为每次移动 map 时都会创建此事件。 因此，有必要停止此事件。 我就这样摆脱了困境。 在 map 初始化之后，我立即写道：

map off('moveend');

对我来说它有效。 现在它工作正常。 如果这对某人有用，我会很高兴。