Google Maps V3：如何阻止标记右键弹出上下文菜单？

我之前也踩过这个坑！地图层面的配置确实能禁用地图本身的右键菜单，但标记自带的默认上下文菜单是独立的，得单独处理才行。

核心思路就是给每个标记绑定contextmenu事件，然后阻止默认行为，具体操作如下：

1. 给单个标记添加事件拦截 #

创建标记的时候，直接给它绑定contextmenu监听器，在回调里调用event.preventDefault()就能阻止默认菜单弹出：

// 先初始化地图（你的原有代码）
const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  disableDefaultUI: true // 你之前设置的地图禁用默认UI配置
});

// 创建标记并绑定右键事件
const marker = new google.maps.Marker({
  position: {lat: -34.397, lng: 150.644},
  map: map,
  title: '自定义标记'
});

// 拦截右键菜单
google.maps.event.addListener(marker, 'contextmenu', function(event) {
  event.preventDefault();
  // 这里还可以加你自己的自定义右键逻辑，比如弹出自定义菜单
});

2. 批量处理多个标记 #

如果有很多标记，建议封装成一个工具函数，避免重复写代码：

function createMarkerWithoutContextMenu(map, position, title) {
  const marker = new google.maps.Marker({
    position: position,
    map: map,
    title: title
  });

  // 统一添加右键拦截
  google.maps.event.addListener(marker, 'contextmenu', function(e) {
    e.preventDefault();
  });

  return marker;
}

// 调用示例
const marker1 = createMarkerWithoutContextMenu(map, {lat: -34.397, lng: 150.644}, '标记1');
const marker2 = createMarkerWithoutContextMenu(map, {lat: -33.890, lng: 151.275}, '标记2');

补充说明 #

如果是已经创建好的标记，也不需要重新创建，直接给现有标记绑定contextmenu事件就行：

// 假设existingMarker是你已有的标记实例
google.maps.event.addListener(existingMarker, 'contextmenu', function(e) {
  e.preventDefault();
});

这样处理后，右键点击标记就不会弹出默认的上下文菜单了，配合你之前的地图全局配置，整个地图的右键操作都不会有默认菜单啦～

内容的提问来源于stack exchange，提问作者emmea90