Question

在浏览器中使用Mapbox GL JS时，包括在Chrome中使用模拟模式，事件contextmenu会响应地图上的长按/点击。但是，在真实设备上，当用户点击并保持地图时，此事件不会触发。

在Mapbox GL JS中监听地图上长按的最佳方法是什么？

Answer 1

讨论了类似的问题here。

我的派生解决方案如下：

if (Browser.isIos()) {
    init_ios_context_menu();
} else {
    map.on('contextmenu', (e) => {
        show_context_menu_or_whatever(e);
    });
} // end if

function init_ios_context_menu() {
    let iosTimeout = null;
    let clearIosTimeout = () => { clearTimeout(iosTimeout); };

    map.on('touchstart', (e) => {
        if (e.originalEvent.touches.length > 1) {
            return;
        } else {
            iosTimeout = setTimeout(() => {
                show_context_menu_or_whatever(e);
            }, 500);
        } // end if-else
    });
    map.on('touchend', clearIosTimeout);
    map.on('touchcancel', clearIosTimeout);
    map.on('touchmove', clearIosTimeout);
    map.on('pointerdrag', clearIosTimeout);
    map.on('pointermove', clearIosTimeout);
    map.on('moveend', clearIosTimeout);
    map.on('gesturestart', clearIosTimeout);
    map.on('gesturechange', clearIosTimeout);
    map.on('gestureend', clearIosTimeout);
};

Mapbox GL JS长按/按

1 个答案: