Google Maps V3 JavaScript 绘制多边形显示为圆圈的异常问题求助

我之前也碰到过一模一样的问题！当时在Chrome和Firefox里卡了好久，终于找到几个可能的根源和解决办法，分享给你：

1. 检查路径点geoFencePoints的格式 #

首先要确认你的geoFencePoints里的每个元素都是标准的google.maps.LatLng实例，如果是手动构造的纯坐标数组（比如只传了[lat,lng]），或者纬度经度搞反了，就会导致多边形渲染异常，甚至变成奇怪的圆圈状。

正确的点构造示例：

const geoFencePoints = [
  new google.maps.LatLng(37.7749, -122.4194),
  new google.maps.LatLng(37.7849, -122.4094),
  new google.maps.LatLng(37.7949, -122.4194)
];

2. 排查全局CSS对Google Maps的影响 #

这是最容易被忽略的坑！Google Maps的多边形是用SVG路径渲染的，如果你的页面里有全局CSS规则（比如给所有path元素设置了stroke-linecap: round、stroke-linejoin: round加上超大的stroke-width），会把多边形的边和顶点渲染成一堆圆圈，而且缩放时因为地图SVG元素的尺寸变化，圆圈的大小和数量也会跟着变。

解决办法是给你的地图容器添加专属样式，重置内部SVG元素的样式：

#your-map-container-id svg path {
  stroke-linecap: inherit !important;
  stroke-linejoin: inherit !important;
  stroke-width: inherit !important;
  fill: inherit !important;
}

3. 暂时关闭geodesic选项测试 #

geodesic: true会让多边形的边沿着地球曲面的圆弧绘制，但在某些缩放级别或者路径点分布特殊的情况下（比如靠近极地、路径点太少），可能会出现渲染异常。你可以先把这个选项改成false，看看多边形是否恢复正常：

geoFenceGeometry = new google.maps.Polygon({
  // 其他参数不变
  geodesic: false,
});

如果关闭后正常，那说明是 geodesic 模式的渲染适配问题，你可以根据场景决定是否保留该选项，或者调整路径点的分布。

4. 检查redrawPolygonMarkers()函数的逻辑 #

你的代码里在mouseup事件里调用了redrawPolygonMarkers()，这个函数如果逻辑有问题（比如错误地在每个顶点甚至多边形区域内创建了大量Circle标记），也会让你误以为多边形变成了圆圈。建议先注释掉这个函数的调用，看看问题是否消失，再逐步排查函数内部的逻辑。

5. 用最小化代码测试 #

如果上面的方法都没解决，你可以写一段最精简的代码（只保留地图初始化和多边形绘制），看看问题是否重现：

const map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(37.7749, -122.4194),
  zoom: 12
});

const testPoints = [
  new google.maps.LatLng(37.7749, -122.4194),
  new google.maps.LatLng(37.7849, -122.4094),
  new google.maps.LatLng(37.7949, -122.4194)
];

const testPolygon = new google.maps.Polygon({
  paths: testPoints,
  strokeColor: "#FF0000",
  strokeOpacity: 1,
  strokeWeight: 4,
  editable: true,
  draggable: true,
  geodesic: true,
  fillColor: "#000000",
  fillOpacity: 0.2,
});

testPolygon.setMap(map);

如果这段代码没问题，那问题肯定出在你的业务逻辑里（比如geoFencePoints的动态修改、其他事件监听的干扰等）。

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