Flutter使用google_maps_flutter在谷歌地图绘制网格显示异常问题排查

• PolylineId重复：google_maps_flutter要求每条Polyline的PolylineId必须唯一，你代码中所有Polyline都使用了固定的const PolylineId("poly")，而传入GoogleMap的polylines参数是Set类型，会根据ID自动去重，最终只会保留最后一条Polyline，其余全部被覆盖。
• 坐标数组全局累加：你把polylineCoordinates定义在了for循环外部，每次循环都往同一个数组中追加坐标，导致每条新生成的Polyline的points属性会包含之前所有线条的坐标，绘制出来的形状完全不符合单条直线的预期。
• 不必要的频繁刷新：每次循环都调用setState刷新UI，其实可以等所有Polyline生成完成后统一调用一次即可，性能更优。

额外提示：你设置的初始缩放值30超出了谷歌地图的最大支持范围（普通地图样式最大支持缩放级别约21），可以调整为18-20方便查看完整网格。

仅需修改_createGrid方法即可：

Future<void> _createGrid() async {
  var gridData = Jsons.gridListJson;
  if (gridData['lines'] != null) {
    var gridDataLines = gridData['lines'] as List;
    // 清空旧数据避免重复添加
    polylines.clear();
    for (int i = 0; i < gridDataLines.length; i++) {
      var line = gridDataLines[i];
      try {
        LatLng start = LatLng(line['start']['lat'], line['start']['lng']);
        LatLng end = LatLng(line['end']['lat'], line['end']['lng']);
        // 每条线单独生成专属的坐标数组，不累加历史数据
        List<LatLng> polylineCoordinates = [start, end];
        polylines.add(Polyline(
            width: 2,
            // 用索引生成唯一的PolylineId
            polylineId: PolylineId("poly_$i"),
            color: const Color.fromARGB(255, 40, 122, 198),
            points: polylineCoordinates));
      } catch (e) {
        print("Ex--- $e");
      }
    }
    // 所有Polyline生成完成后统一刷新UI
    setState(() {});
    print(polylines.length);
  }
}

修改完成后即可正常显示由横纵线组成的预期网格效果。

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