Google Maps API中重叠多边形的事件触发问题咨询

结论先行 #

Google Maps API 默认确实只会触发**最上层（zIndex值更高）**Polygon的点击类事件（click、dblclick等），zIndex较低的下层Polygon不会收到这类事件。你观察到的mouseout事件表现是正常的——当鼠标从红色Polygon（zIndex=5）的非重叠区域移入和蓝色Polygon（zIndex=6）的重叠区时，红色Polygon会触发mouseout，因为此时鼠标已经离开它的“独占”区域，进入了上层Polygon的覆盖范围。

官方可行的实现思路 #

目前Google Maps API没有原生支持让事件自动传播到所有重叠Polygon的机制，但可以通过以下两种官方API支持的方式模拟实现：

1. 临时切换上层Polygon的可点击状态

当上层Polygon触发事件时，临时将其设置为不可点击，再手动触发一次地图的对应事件，让事件落到下层Polygon上，处理完成后恢复上层的可点击状态。

示例代码：

// 上层蓝色Polygon的点击事件处理
bluePolygon.addListener('click', function(e) {
  // 先处理蓝色Polygon的逻辑
  console.log('蓝色Polygon被点击');
  // 临时禁用上层点击
  this.setOptions({ clickable: false });
  // 手动触发地图点击，触发下层红色Polygon的事件
  google.maps.event.trigger(map, 'click', e);
  // 恢复上层点击状态
  this.setOptions({ clickable: true });
});

// 下层红色Polygon的点击事件处理
redPolygon.addListener('click', function() {
  console.log('红色Polygon被点击');
});

注意：如果有多层重叠，需要循环/递归处理层级，同时要注意避免事件重复触发的问题。

2. 用官方几何工具类检测点击点归属

利用Google Maps API提供的google.maps.geometry.poly.containsLocation方法，在地图的点击事件中遍历所有Polygon，判断点击坐标是否在Polygon范围内，再手动触发对应Polygon的事件。

示例代码：

// 地图点击事件统一处理
map.addListener('click', function(e) {
  // 存储所有需要检测的Polygon
  const allPolygons = [redPolygon, bluePolygon];
  allPolygons.forEach(polygon => {
    // 用官方方法判断点击点是否在Polygon内
    if (google.maps.geometry.poly.containsLocation(e.latLng, polygon)) {
      // 手动触发该Polygon的click事件
      google.maps.event.trigger(polygon, 'click', e);
    }
  });
});

这个方法虽然需要遍历，但依赖官方提供的几何检测能力，准确性和兼容性都有保障，也符合你尽量使用官方API的需求。

总结 #

如果要求完全依赖API原生的事件传播机制实现多层重叠Polygon的事件触发，目前是无法做到的，只能通过上述两种方式模拟实现。

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