Google Map API点击Polygon/Circle/Rectangle无法触发地图点击事件如何解决

Google Maps API中，Polygon、Circle、Rectangle这类矢量覆盖物默认会拦截点击事件，阻止事件冒泡到Map实例层，因此点击覆盖物区域时，绑定在map上的click监听不会触发。

方案1：无需响应覆盖物点击逻辑，直接透传事件 #

如果不需要给覆盖物单独绑定点击事件，只需要点击覆盖物时和点击地图空白区表现一致，直接在创建覆盖物时添加clickable: false配置即可。该配置会让覆盖物不拦截任何鼠标交互事件，直接透传给下层的地图：

const circle = new google.maps.Circle({
  center,
  radius,
  map,
  clickable: false // 新增该配置即可
});

// 此时点击circle区域也会触发地图的点击事件
map.addListener("click", (e) => {
  console.log('map click');
})

方案2：需要同时响应覆盖物和地图的点击逻辑 #

如果覆盖物本身需要绑定独立的点击逻辑，那就在覆盖物的点击监听中，手动调用地图点击的处理函数即可：

// 把地图点击逻辑抽为独立函数，方便多处调用
const handleMapClick = (e) => {
  console.log('map click');
  // 原有地图点击的业务逻辑，比如添加标记等
}

const circle = new google.maps.Circle({
  center,
  radius,
  map,
});

// 绑定地图原生点击事件
map.addListener("click", handleMapClick);

// 绑定覆盖物点击事件
circle.addListener("click", (e) => {
  // 先执行覆盖物自身的点击逻辑
  console.log('circle click');
  // 手动调用地图点击处理函数，透传事件参数
  handleMapClick(e);
})

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