如何在Flutter Google Maps中动态绘制多边形？

可能的问题点及解决步骤： #

1. Widget未挂载时调用setState
   如果在Widget还没完成初始化（比如initState执行前，或Widget已被销毁）调用drawPolygonBoundary，setState不会触发UI更新。解决方法是调用前先检查mounted状态：

Future<void> drawPolygonBoundary(String name, List points) async {
    if (!mounted) return; // 先检查Widget是否已挂载
    List<LatLng> boundaryPoints = [];
    for (List point in points) {
      boundaryPoints.add(LatLng(point[0], point[1]));
    }
    Set<Polygon> newPolygons = HashSet<Polygon>();
    newPolygons.add(
      Polygon(
        polygonId: PolygonId(name),
        points: boundaryPoints,
        fillColor: Colors.green.withOpacity(0.3),
        strokeColor: Colors.green,
        geodesic: true,
        strokeWidth: 4,
        onTap: () {},
      ),
    );
    setState(() {
      _polygons = newPolygons;
    });
    print(_polygons);
  }

2. 多边形集合被完全覆盖（而非追加）
   你的代码每次调用都会创建新的HashSet替换原_polygons，如果需要保留之前绘制的多边形，应改为在原集合基础上添加元素：

setState(() {
  _polygons.add(
    Polygon(
      polygonId: PolygonId(name),
      points: boundaryPoints,
      fillColor: Colors.green.withOpacity(0.3),
      strokeColor: Colors.green,
      geodesic: true,
      strokeWidth: 4,
      onTap: () {},
    ),
  );
});

注意：PolygonId必须唯一，否则同ID的多边形会被覆盖。

3. 传入的points格式错误
   确保传入的points是包含数值类型经纬度的二维数组，示例：

// 正确的参数格式
final samplePoints = [
  [31.2304, 121.4737],
  [31.2204, 121.4837],
  [31.2104, 121.4737],
];
drawPolygonBoundary('shanghai', samplePoints);

如果points内的元素不是数值类型，会导致LatLng创建失败，多边形无法渲染。

4. 确认GoogleMap控制器已初始化
   虽然你的代码绑定了polygons参数，但如果GoogleMap还未完成初始化，可能无法及时渲染新多边形。建议在_onMapCreated回调执行完成后，再调用drawPolygonBoundary方法。

验证步骤： #

• 调用drawPolygonBoundary时，先打印传入的points，确认格式正确。
• 打印_polygons的长度，确认状态更新后集合内存在数据。
• 检查PolygonId是否唯一，避免同ID多边形被覆盖。

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