Question

我需要在绘制或缩放地图时执行一些操作，因此我将回调附加到事件 moveend 。

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

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

为了避免这种情况，我尝试在订阅moveend事件之前等待加载事件，但没有任何改变。所以我试着在 whenReady callaback中附加它，但是它再次被触发了三次。

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

最后，我发现在调整大小事件之后它运行得很好： moveend 被jonly一次激活。但我真的相信有一种解决问题的最佳方法。

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

感谢您的帮助。

Answer 1

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

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

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

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

Answer 2

对于其他对此感兴趣的人，请研究top()函数上的options.debounceMoveend选项。它是文档中的mentioned in briefly，但不幸的是，它看起来似乎仅用于该函数，而不是通常用于invalidateSize事件。

[...]如果 options.debounceMoveend 为 true ，它将延迟 moveend 事件，因此即使发生也很少发生如果该方法连续被调用多次。

Reference to the line in source code (L3541)

Answer 3

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

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

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

link to developer.mozilla.org

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

3 个答案: