Google Maps API：禁用POI弹窗同时触发Feature Layer点击事件

不用关掉clickableIcons，反而把它设为true——这样点击POI时能正常触发featureLayer的点击事件，然后在事件回调里直接阻止默认的弹窗行为就行，完美兼顾两个需求。

具体代码修改 #

首先调整地图初始化配置：

map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: window.google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  fullscreenControl: false,
  streetViewControl: false,
  clickableIcons: true, // 此处改为true
  mapId: <My Map Id>
});

然后修改featureLayer的点击事件监听：

featureLayer.addListener('click', function(event) {
  // 直接阻止Google Maps的默认POI弹窗行为
  event.stop();
  
  // 此处编写你原本要执行的featureLayer点击逻辑
  console.log('featureLayer或其上的POI被点击了');
  
  // 若不需要触发后续map的click事件，可添加下面这句
  // event.stopPropagation();
});

原理说明 #

• 当clickableIcons:true时，POI会被纳入featureLayer的点击检测范围，点击POI会优先触发featureLayer的点击事件，满足你的需求。
• event.stop()是Google Maps事件API的内置方法，可直接取消默认的POI弹窗行为。
• 若要避免事件冒泡到map的点击事件，额外调用event.stopPropagation()即可。

备选方案：用地图样式屏蔽POI自身交互 #

如果上面的方法不符合你的场景，还可以通过自定义地图样式，直接禁用POI自身的弹窗触发能力，但不影响featureLayer的事件监听：

map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: window.google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: true,
  fullscreenControl: false,
  streetViewControl: false,
  clickableIcons: true,
  mapId: <My Map Id>,
  styles: [
    // 可选：隐藏POI的图标和文字
    {
      featureType: 'poi',
      elementType: 'labels.icon',
      stylers: [{ visibility: 'off' }]
    },
    {
      featureType: 'poi',
      elementType: 'labels.text',
      stylers: [{ visibility: 'off' }]
    },
    // 关键：禁用POI自身的可点击性，使其不会触发默认弹窗，但featureLayer仍能捕获点击
    {
      featureType: 'poi',
      elementType: 'geometry',
      stylers: [{ clickable: false }]
    }
  ]
});

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