Google Maps API：如何点击数据层后方的可点击多边形

你的解决方法完全可行！ #

首先，你找到的把clickable: false放在数据层样式的外层对象而非icon配置内的方案是完全正确的——这是因为clickable是Google Maps数据层Feature的顶级样式属性，不属于icon子配置的一部分，之前写在icon里自然不会生效。禁用数据层Feature的点击后，它们就不会再拦截底层多边形的点击事件，你的模态框触发逻辑就能正常工作了。

其他可选的优化方案 #

如果之后你需要保留数据层的某些交互（比如鼠标悬停提示），但仍想让多边形响应点击，还有两种更灵活的方案：

1. 阻止数据层点击事件冒泡

不需要完全禁用数据层的可点击性，而是在数据层的点击事件监听器里阻止事件向上冒泡，这样底层多边形就能接收到点击：

map.data.addListener('click', function(event) {
  event.stop(); // 阻止事件传播到地图底层的多边形
});

这种方式的好处是，数据层的其他交互（比如你写的mouseover/mouseout提示）依然可以正常使用，同时不影响多边形的点击。

2. 自定义OverlayView控制层级

如果需要更精细的层级控制（比如让圆圈在多边形下方显示），可以放弃数据层的icon，改用google.maps.OverlayView自定义绘制圆圈。OverlayView允许你通过setPane方法指定绘制的层级（比如放在overlayLayer，这是多边形所在的层级，而数据层默认在overlayMouseTarget层级，优先级更高）。不过这个方案需要更多代码量，适合有复杂自定义需求的场景，示例思路如下：

class CustomCircleOverlay extends google.maps.OverlayView {
  constructor(position, scale, map) {
    super();
    this.position = position;
    this.scale = scale;
    this.setMap(map);
  }

  onAdd() {
    // 创建SVG或Canvas元素绘制圆圈
    const circle = document.createElement('div');
    circle.style.width = `${this.scale * 2}px`;
    circle.style.height = `${this.scale * 2}px`;
    circle.style.borderRadius = '50%';
    circle.style.backgroundColor = 'rgba(0,255,0,0.35)';
    circle.style.position = 'absolute';
    // 绑定到overlayLayer层级（和多边形同层级）
    const panes = this.getPanes();
    panes.overlayLayer.appendChild(circle);
    this.div = circle;
  }

  draw() {
    const projection = this.getProjection();
    const point = projection.fromLatLngToDivPixel(this.position);
    // 调整圆圈位置
    this.div.style.left = `${point.x - this.scale}px`;
    this.div.style.top = `${point.y - this.scale}px`;
  }
}

// 加载GeoJson后创建自定义Overlay
map.data.loadGeoJson('./data/test.json', {}, function(features) {
  features.forEach(feature => {
    const percentage = parseFloat(feature.getProperty('percentage'));
    const position = feature.getGeometry().get(); // 获取坐标点
    new CustomCircleOverlay(position, percentage, map);
  });
  // 加载完后可以清除数据层，因为已经用自定义Overlay替代了
  map.data.forEach(feature => map.data.remove(feature));
});

总结 #

• 如果你只需要快速解决点击被遮挡的问题，你的原始方案（外层设置clickable: false）是最简单高效的。
• 如果你需要保留数据层的交互，推荐用阻止事件冒泡的方案。
• 只有当你需要严格控制图层层级时，才考虑用自定义OverlayView。

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