Flutter中如何避免用户移动时GoogleMap因状态保存重复重建

你当前的核心问题是用ValueListenableBuilder包裹了整个GoogleMap组件，每次调用updateMarkerAndCircle更新gMaps.value时，都会触发builder重新创建GoogleMap实例，导致地图频繁重建。但实际上你只需要更新经纬度数据和Marker，完全不需要重建整个地图。

方案1：缩小ValueListenableBuilder作用范围，仅更新Marker #

将GoogleMap从ValueListenableBuilder中移出，只让它负责生成Marker集合。这样只有Marker变化时才会更新对应部分，地图主体保持稳定不会重建。

修改后的地图展示代码：

GoogleMap(
  myLocationEnabled: true,
  zoomGesturesEnabled: true,
  scrollGesturesEnabled: true,
  compassEnabled: true,
  rotateGesturesEnabled: true,
  mapToolbarEnabled: true,
  tiltGesturesEnabled: true,
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
    Factory<OneSequenceGestureRecognizer>(
      () => EagerGestureRecognizer(),
    ),
  ].toSet(),
  mapType: MapType.normal,
  initialCameraPosition: initialLocation,
  markers: {
    ValueListenableBuilder<GMapsModel>(
      valueListenable: gMaps,
      builder: (_, model, __) {
        return model.marker ?? Marker(id: MarkerId('user-location'));
      },
    ),
  },
  onMapCreated: (GoogleMapController controller) {
    _controller = controller;
  },
)

方案2：用StatefulWidget本地状态管理Marker #

如果不想依赖ValueListenableBuilder管理Marker，可以在State类中监听gMaps的变化，仅更新Marker的本地状态，避免触发整个地图重建：

1. 在State类中添加本地状态变量：

Marker? _userMarker;

2. 初始化时监听gMaps变化：

@override
void initState() {
  super.initState();
  _userMarker = gMaps.value.marker;
  gMaps.addListener(_updateUserMarker);
}

@override
void dispose() {
  gMaps.removeListener(_updateUserMarker);
  super.dispose();
}

void _updateUserMarker() {
  setState(() {
    _userMarker = gMaps.value.marker;
  });
}

3. 修改地图展示代码：

GoogleMap(
  // 保留原有属性
  markers: _userMarker != null ? {_userMarker!} : {},
  onMapCreated: (GoogleMapController controller) {
    _controller = controller;
  },
)

方案3：分离经纬度存储与地图更新逻辑 #

将gMaps仅作为经纬度的存储容器，地图的Marker和相机位置更新直接通过控制器和本地状态处理，不依赖ValueListenableBuilder触发地图重建：

修改updateMarkerAndCircle函数，同时更新本地Marker状态：

void updateMarkerAndCircle(Position newLocalData) {
  // 更新经纬度数据
  gMaps.value = GMapsModel(
    latUser: newLocalData.latitude,
    longUser: newLocalData.longitude,
    marker: gMaps.value.marker,
  );
  
  // 生成新的Marker
  final newMarker = Marker(
    markerId: MarkerId('user-location'),
    position: LatLng(newLocalData.latitude, newLocalData.longitude),
    // 自定义Marker的其他属性
  );
  
  setState(() {
    _userMarker = newMarker;
  });
}

然后地图组件直接使用_userMarker，无需ValueListenableBuilder包裹，这样地图只会在Marker变化时局部更新，不会整体重建。

• 永远不要用状态类包裹整个GoogleMap，只针对需要动态变化的子组件（如Marker、Polyline）做局部更新。
• 你已经在使用_controller.animateCamera更新相机位置，这个操作不会触发地图重建，可以保留。
• 经纬度数据的保存和UI更新逻辑要分离，确保只有UI需要变化的部分才会触发更新。

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