Google Maps重叠形状绘制问题：填充透明度异常

嘿，我太懂这种Google Maps绘图时的诡异问题了！之前做项目也碰到过类似的多边形重叠后透明度异常的情况，给你分析几个大概率的原因和解决办法：

1. 填充规则（fillRule）导致的渲染异常 #

Google Maps的多边形默认使用nonzero填充规则，这个规则会根据路径的绘制方向（顺时针/逆时针）来计算重叠区域的填充效果。如果你的三角形和方形路径方向一致，重叠区域的填充会被叠加，看起来就像其中一个图形的透明设置没生效；如果方向相反，甚至可能让重叠区域反而被填充了。

解决办法很简单，创建多边形时明确指定fillRule: 'evenodd'，这个规则是按区域被路径包围的次数来判断是否填充，不管路径方向，重叠区域会保持透明：

// 示例代码，给每个多边形设置透明和evenodd规则
const polygonOptions = {
  paths: boundaryPoints,
  fillColor: '#000000', // 颜色不影响，因为透明度为0
  fillOpacity: 0,
  strokeColor: '#2196F3',
  strokeWeight: 2,
  fillRule: 'evenodd' // 关键配置
};
const polygon = new google.maps.Polygon(polygonOptions);
polygon.setMap(yourMapInstance);

2. 代码逻辑中误修改了单个图形的透明度 #

你提到无重叠时正常，重叠后只有一个图形的fillOpacity被设为0，那大概率是你的代码里有重叠检测相关的逻辑，在判断到图形重叠时错误地跳过了其中一个图形的透明度设置，或者把它的fillOpacity改成了非0值。

建议检查：

• 处理this._boundaries循环时，有没有针对重叠图形的特殊判断分支
• 是否有代码在图形创建后，根据重叠情况动态修改了fillOpacity

3. 渲染层级（zIndex）的干扰 #

如果其中一个多边形的zIndex比另一个高，且高层级的多边形fillOpacity没正确设为0，就会覆盖在透明的多边形上面，看起来像是下面的图形没透明。可以给所有多边形统一设置zIndex，或者确保每个多边形的fillOpacity都明确设为0：

// 给所有多边形统一设置zIndex和透明
const polygonOptions = {
  // ...其他配置
  fillOpacity: 0,
  zIndex: 100 // 统一层级，避免覆盖
};

如果还是没解决，建议把处理this._boundaries的完整代码片段贴出来，这样能更精准定位问题～

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