Google Maps V3 - 阻止右键单击标记的上下文菜单答案

【问题标题】：Google Maps V3 - Prevent Context Menu on Right Click on MarkerGoogle Maps V3 - 阻止右键单击标记的上下文菜单
【发布时间】：2018-03-03 21:58:41
【问题描述】：

在最近对 google Maps Javascript V3 API 进行了一些更新后，我注意到当我在标记上单击鼠标右键时开始显示上下文菜单。基本上代码是

google.maps.event.addListener(marker, 'rightclick', function (event) {
    foo(marker);
});

我已经尝试过该选项

google.maps.event.addListener(marker, 'rightclick', function (event) {
    deleteMarker(marker);
    event.stop();
    return false;
});

但上下文菜单仍然继续出现。我也把它放在了整个地图上

    $("#map").contextmenu(function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

而且，正确地，单击地图时不会出现上下文菜单。如果也在标记右键单击上，我该如何停止？

这是该问题的一个示例：https://jsfiddle.net/rnxLum5j/

【问题讨论】：

请提供一个minimal reproducible example 来证明您的问题。

标签： javascript google-maps-api-3

【解决方案1】：

遇到了同样的问题，并通过使用超时延迟执行显示对话框来解决它。在您的小提琴中将 google.maps.event.addListener 更改为

 google.maps.event.addListener(map, 'rightclick', function (ev) {
    setTimeout(ShowContextMenuGoolge, 0, ContextMenu, ev);
});

【讨论】：

这是我在使用新的 Angular 地图小部件时遇到此问题时唯一有效的方法。

【解决方案2】：

我也有这个问题。

我认为这是 google maps 'rightclick' 事件的错误。

我试图停止传播并取消冒泡，但 DOM 'contextmenu' 事件仍在打开的 'context-menu' 元素上触发！

我的解决方案是阻止事件在上下文菜单元素上触发。

var mapCanvas = document.getElementById("map_canvas");
$(mapCanvas).on('contextmenu', '.custom-context-menu', function (e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
});

这是一个错误示例：https://jsfiddle.net/rnxLum5j/

【讨论】：

【解决方案3】：

最后，我解决了禁用地图所在 div 上的上下文菜单而不是地图本身的问题。

【讨论】：