Mapbox GL JS 长按/按住操作

Question

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

如何在 Mapbox GL JS 中监听地图上的长按操作是最好的方法？

- jczaplew

---

哪个设备？这可能是一个错误或值得在 https://github.com/mapbox/mapbox-gl-js/issues 上报告的问题。 - Steve Bennett

iOS。在Chrome模拟器中，使用“contextmenu”事件可以按预期进行“tap-hold”。 - jczaplew

这个问题是在iOS上的Chrome浏览器出现的，还是其他浏览器？我认为你应该报告一下。 - Steve Bennett

我在iOS上也遇到了问题。它在Android上可以工作，但在iOS上无法工作。有什么解决办法吗？ - Khurshid Ansari

在Android和iOS上遇到了这个问题。这里有一个开放的错误报告：https://github.com/mapbox/mapbox-gl-js/issues/10179 - Douglas Gaskell

Answer 1

这里讨论了类似的问题。

我的解决方案如下：

    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;
            }
            iosTimeout = setTimeout(() => {
                show_context_menu_or_whatever(e);
            }, 500);
        });
        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);
    };

- Petr Nagy