Google Maps省级交互地图透明显示异常排查求助

算力阿峰

2026-6-22

Google Maps 区域镂空异常修复方案

问题根源

Google Maps 的 Polygon 组件通过顶点绘制顺序区分填充区域和镂空孔洞：

主多边形（覆盖全图的 outerBounds）与孔洞（目标区域多边形）的顶点顺序必须完全相反（主顺时针则孔洞逆时针，反之亦然）
若两者顺序一致，孔洞会被判定为主多边形的延伸区域，导致该区域被白色填充覆盖，无法透显底层地图

修复步骤

1. 添加路径反转工具函数

用于修正区域多边形的顶点顺序，确保与主多边形方向相反：

// 反转多边形顶点顺序
function reversePath(path) {
  return path.slice().reverse();
}

2. 修改孔洞添加逻辑

在addEcoZones函数中，将区域路径反转后再作为孔洞添加到overlayPolygon：

// 原代码：
// paths.push(new google.maps.MVCArray(zoneCoordinates));

// 修改为：
const reversedZoneCoords = reversePath(zoneCoordinates);
paths.push(new google.maps.MVCArray(reversedZoneCoords));

3. 验证主多边形顺序（可选）

当前outerBounds为顺时针方向，若修改后仍有异常，可尝试反转主多边形的顶点顺序：

const outerBounds = [
  new google.maps.LatLng(85, 180),
  new google.maps.LatLng(0, 180),
  new google.maps.LatLng(-85, 180),
  new google.maps.LatLng(-85, 90),
  new google.maps.LatLng(-85, 0),
  new google.maps.LatLng(-85, -90),
  new google.maps.LatLng(-85, -180),
  new google.maps.LatLng(0, -180),
  new google.maps.LatLng(85, -180),
  new google.maps.LatLng(85, -90),
  new google.maps.LatLng(85, 0),
  new google.maps.LatLng(85, 90),
  new google.maps.LatLng(85, 180),
];