google_maps_flutter：如何不调用setState动态绘制折线？

你可以直接使用google_maps_flutter提供的GoogleMapController来操作折线，完全绕过setState，避免因Widget重建导致的性能问题。具体实现步骤如下：

1. 持有GoogleMapController实例 #

首先在Widget中保存地图控制器的引用，通过onMapCreated回调获取：

GoogleMapController? _mapController;
final PolylineId _tripPolylineId = PolylineId('user-trip');

void _onMapCreated(GoogleMapController controller) {
  _mapController = controller;
  // 初始化折线（第一次加载时调用）
  _initializeTripPolyline();
}

在GoogleMap组件中绑定这个回调：

GoogleMap(
  onMapCreated: _onMapCreated,
  // 其他配置项（如初始相机位置、地图类型等）...
)

2. 初始化折线 #

首次创建折线时，使用控制器的addPolyline方法添加到地图上，不需要setState：

void _initializeTripPolyline() async {
  if (_mapController == null) return;
  
  await _mapController!.addPolyline(Polyline(
    polylineId: _tripPolylineId,
    visible: true,
    width: 7,
    color: const Color.fromARGB(255, 45, 115, 239),
    points: [], // 初始空坐标列表
  ));
}

3. 动态更新折线 #

当获取到新的位置坐标时，直接通过控制器的updatePolyline方法更新折线的点，无需触发setState：

替换整个坐标列表（适合批量更新）

void _updateTripPolyline(List<LatLng> newCoordinates) async {
  if (_mapController == null) return;
  
  await _mapController!.updatePolyline(
    _tripPolylineId,
    PolylineUpdates(
      points: PolylinePointUpdates.replace(newCoordinates),
    ),
  );
}

追加单个新坐标（适合实时增量更新）

如果每次只获取到一个新位置，用append比替换整个列表更高效：

void _appendNewLocation(LatLng newPoint) async {
  if (_mapController == null) return;
  
  await _mapController!.updatePolyline(
    _tripPolylineId,
    PolylineUpdates(
      points: PolylinePointUpdates.append([newPoint]),
    ),
  );
}

优势说明 #

• 直接操作地图层面的折线元素，不会触发Widget的重建，大幅减少资源消耗
• 地图响应更流畅，避免频繁setState导致的卡顿
• 支持增量更新，进一步优化性能

注意事项 #

• 确保使用最新稳定版的google_maps_flutter，updatePolyline等方法是较新版本引入的
• 调用控制器方法前需判断_mapController不为null，避免空指针异常

内容的提问来源于stack exchange，提问作者Jérôme