移动设备上的 Azure 地图出现问题

Question

我是 Azure 地图的新手，在 Bing 地图消亡之前从它切换过来。我的简单试用应用程序在 Windows 上可以正常运行，但地图事件（我尝试过单击和 contextmenu=右键单击）似乎无法在三星 Android 手机或 iOS（iPhone 和 iPad）上正确触发。我长按右键，听到声音。 在 Android 手机上，显然没有任何反应，Chrome 控制台中没有错误消息。 在 iPad 上，上下文菜单会生成实际的 Google 上下文菜单，这不是与地图事件关联的操作。 正如我所说，Windows 上一切都很好。 预先感谢您的任何帮助，也许我遗漏了一些明显的东西。 兰布洛德

尝试在移动设备上单击和上下文菜单，并预期提供要触发的功能。 在 Android 上没有结果，在 iOS 上出现了 Google 上下文菜单。

编辑：移动设备上的单击和上下文菜单也不包含提供的 AzureMaps 示例，因此它不仅仅发生在我的网页中。 例如。 https://samples.azuremaps.com/map/add-a-context-menu-to-the-map

Answer 1

这是我第一次听说这个问题，很可能是因为右键单击一般在网络应用程序中并不经常使用，因为这意味着禁用用户通常期望的浏览器中的默认行为。

深入研究这个问题，我发现它存在于 Azure Maps Web SDK 构建于其之上的底层 MapLibre 和 Mapbox 控件中。

• https://github.com/maplibre/maplibre-gl-js/issues/373
• https://github.com/mapbox/mapbox-gl-js/issues/10179

在 Windows 触摸屏上进行测试，我还发现这不适用于触摸（上下文菜单仅在单击鼠标右键时触发）。所以看来右键单击事件（上下文菜单）仅适用于鼠标。

也就是说，可以通过监视触摸事件来相当轻松地解决这个问题并添加支持。这是我为此创建的一个简单的可重用类：

class contextMenuTouchSupport {

    constructor(map, maxTouchDragDistance) {
        const self = this;

        self.map = map;
        self.startTime = null;
        self.startPixel = null;

        self.maxTouchDragDistance = maxTouchDragDistance || 10;

        //Monitor and time touch events.
        map.events.add('touchstart', (e) => {
            self.startTime = new Date().getTime();
            self.startPixel = e.pixel;
        });

        map.events.add('touchend', (e) => {
            const endTime = new Date().getTime();

            const dt = endTime - self.startTime;

            //Calculate offset distance. Allow for a little bit of movement of the finger, but not much as then they would be doing something else.
            const dx = self.startPixel[0] - e.pixel[0];
            const dy = self.startPixel[1] - e.pixel[1];

            const distance = Math.sqrt(dx * dx + dy * dy);
                
            //If the touch event lasted more than 500ms, it is likely a context menu event.
            if (dt >= 500 && distance <= self.maxTouchDragDistance) {
                //Clone the event args to make sure we don't modify the original event args used by touch events.
                const args = Object.assign({}, e);

                //Change the type of the event to contextmenu.
                args.type = 'contextmenu';

                //Invoke a context menu event in the map.
                map.events.invoke('contextmenu', args);
            }
        });
    }
}

此类添加了对上下文菜单的触摸支持并触发地图事件，以便应用程序的部分保持不变。要使用此类，只需执行以下操作：

//Wait until the map resources are ready.
map.events.add('ready', function () {

    //Add context menu event in normal way.
    map.events.add('contextmenu', function () {
        alert('context menu event fired');
    });

    //Add the touch support for context menu
    new contextMenuTouchSupport(map);
});

我有一个工作版本托管在这里，您可以尝试一下。 http://localhost:57174/Demos/AzureMaps/ContextMenuMobileWorkaround.html