寻求适配Flutter Bloc与Google Maps的标记聚类库及问题解决

核心问题定位 #

你遇到的地图空白问题，本质是聚类库的状态更新没有和Bloc的状态流绑定：UI层直接持有ClusterManager实例，但Bloc状态里的markers集合没有同步聚类后的结果；同时在UI层直接操作ClusterManager，违背了Bloc的单向数据流原则，导致状态不一致。另外，直接在UI层初始化聚类项列表会破坏Bloc的业务逻辑封装，引发运行时崩溃。

分步解决方案 #

1. 将ClusterManager的控制权移到Bloc内部 #

Bloc应该作为聚类逻辑的管理者，负责初始化ClusterManager、处理相机事件、更新聚类结果并同步到状态中。这样能保证状态流的一致性，避免UI层和聚类库的直接冲突。

示例MapBloc核心代码：

class MapBloc extends Bloc<MapEvent, MapState> {
  late ClusterManager _clusterManager;
  final LocationBloc locationBloc;

  MapBloc({required this.locationBloc}) : super(MapInitial()) {
    // 初始化ClusterManager，设置聚类回调更新状态
    _clusterManager = ClusterManager<Marker>(
      [], // 初始空列表，后续从数据源加载
      _updateMarkers,
      markerBuilder: (cluster) {
        // 自定义聚类标记的构建逻辑
        return Marker(
          markerId: MarkerId(cluster.id.toString()),
          position: cluster.location,
          icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
          infoWindow: InfoWindow(title: cluster.count.toString()),
        );
      },
    );

    // 监听位置数据变化，更新聚类项
    on<LoadLocationMarkers>((event, emit) {
      _clusterManager.setItems(event.markers);
      _clusterManager.updateMap();
    });

    // 处理相机移动事件
    on<MapCameraMoved>((event, emit) {
      _clusterManager.onCameraMove(event.position);
    });

    // 处理相机闲置事件
    on<MapCameraIdle>((event, emit) {
      _clusterManager.updateMap();
    });

    // 处理地图初始化事件
    on<MapInitialized>((event, emit) {
      _clusterManager.setMapId(event.controller.mapId);
      // 加载初始标记数据
      add(LoadLocationMarkers(markers: _getInitialMarkers()));
    });
  }

  // 聚类结果更新回调，同步到Bloc状态
  void _updateMarkers(Set<Marker> markers) {
    if (state is MapLoaded) {
      emit((state as MapLoaded).copyWith(markers: markers));
    }
  }

  // 模拟获取初始标记数据
  Set<Marker> _getInitialMarkers() {
    // 从数据源或LocationBloc获取实际标记
    return {};
  }
}

// 对应的MapState示例
abstract class MapState {}

class MapInitial extends MapState {}

class MapLoaded extends MapState {
  final Set<Marker> markers;
  final GoogleMapController? controller;
  final bool creatingLocation;

  MapLoaded({
    required this.markers,
    this.controller,
    this.creatingLocation = false,
  });

  MapLoaded copyWith({
    Set<Marker>? markers,
    GoogleMapController? controller,
    bool? creatingLocation,
  }) {
    return MapLoaded(
      markers: markers ?? this.markers,
      controller: controller ?? this.controller,
      creatingLocation: creatingLocation ?? this.creatingLocation,
    );
  }
}

2. 修正UI层的MapView实现 #

UI层只需要监听Bloc状态，渲染markers集合，并将地图事件转发给Bloc处理，不再直接持有ClusterManager实例。

修改后的MapView代码：

class MapView extends StatelessWidget {
  final LatLng initialLocation;
  final CustomInfoWindowController infoWindowController;
  final Completer<GoogleMapController> newMapController = Completer();

  MapView({
    Key? key,
    required this.initialLocation,
    required this.infoWindowController,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CameraPosition initialCameraPosition =
        CameraPosition(target: initialLocation);
    final renderSize = MediaQuery.of(context).size;

    return SizedBox(
      width: renderSize.width,
      height: renderSize.height,
      child: BlocBuilder<MapBloc, MapState>(
        builder: (context, state) {
          if (state is MapLoaded) {
            return GoogleMap(
              onTap: (position) {
                infoWindowController.hideInfoWindow!();
                if (state.creatingLocation) {
                  context.read<MapBloc>().add(TurnCreationModeOff());
                }
              },
              onCameraMove: (position) {
                infoWindowController.onCameraMove!();
                context.read<MapBloc>().add(MapCameraMoved(position: position));
              },
              onCameraIdle: () {
                context.read<MapBloc>().add(HoldZoomLevel());
                context.read<MapBloc>().add(MapCameraIdle());
                context.read<MapBloc>().printMapID();
              },
              onLongPress: (LatLng location) {
                context
                    .read<LocationCreationBloc>()
                    .add(LocationAcquired(location: location));
                final Marker newMarker = Marker(
                  draggable: true,
                  markerId: const MarkerId('new'),
                  position: location,
                  icon: BitmapDescriptor.defaultMarkerWithHue(
                      BitmapDescriptor.hueViolet),
                  infoWindow: InfoWindow(
                    title: 'Pulsame para crear una nueva ubicacion',
                    snippet:
                        'Toca cualquier lado del mapa y reajusta el zoom para destruirme',
                    onTap: () {
                      Navigator.of(context).pushAndRemoveUntil(
                          CreationScreen.route(), (route) => false);
                    },
                  ),
                );
                context.read<MapBloc>().add(RenderNewMarker(marker: newMarker));
              },
              initialCameraPosition: initialCameraPosition,
              compassEnabled: true,
              myLocationEnabled: true,
              markers: state.markers,
              zoomControlsEnabled: false,
              myLocationButtonEnabled: true,
              mapToolbarEnabled: false,
              onMapCreated: (GoogleMapController controller) {
                context.read<MapBloc>().add(MapInitialized(
                      controller: controller,
                      windowController: infoWindowController,
                      location: context
                          .read<LocationBloc>()
                          .state
                          .lastKnownLocation,
                    ));
                newMapController.complete(controller);
                infoWindowController.googleMapController = controller;
              },
            );
          }
          // 加载状态时显示占位
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

3. 处理新增标记的聚类同步 #

当通过长按添加新标记时，需要在Bloc中把新标记加入ClusterManager的items列表，确保聚类逻辑能包含新标记：

在MapBloc中添加事件处理：

on<RenderNewMarker>((event, emit) {
  final currentItems = _clusterManager.items.toList();
  currentItems.add(event.marker);
  _clusterManager.setItems(currentItems);
  _clusterManager.updateMap();
});

on<TurnCreationModeOff>((event, emit) {
  if (state is MapLoaded) {
    emit((state as MapLoaded).copyWith(creatingLocation: false));
  }
});

关键注意事项 #

• 严格遵循Bloc的单向数据流：所有状态变更（包括聚类结果）都由Bloc管理，UI层只做渲染和事件触发。
• 避免在UI层持有ClusterManager实例，防止状态不一致导致地图空白或崩溃。
• 确保ClusterManager的setMapId在地图初始化后调用，否则聚类标记无法正确渲染到地图上。

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