Flutter Google Maps初始化后不显示带标签的Marker问题

问题原因 #

1. 地图初始化时序冲突：在initState中创建带标签的Marker时，GoogleMap尚未完成初始化，LabelMarker的渲染依赖地图上下文或底层资源，导致初始加载时无法正确绘制；热重载时地图已完全就绪，所以Marker能正常显示。
2. 状态更新未通知框架：直接修改_zipCodeMarkers集合内容后，未调用setState通知Flutter框架状态变化，即使集合已有元素，GoogleMap也无法感知到新添加的Marker（尤其是地图初始化阶段）。

解决方案 #

方案1：将Marker初始化移至地图创建完成后（推荐）

把Marker的初始化逻辑放到onMapCreated回调中，确保地图完全就绪后再添加Marker，同时通过setState触发UI更新：

class mappy extends StatefulWidget {
  const mappy({Key? key});

  @override
  State<mappy> createState() => sst();
}

class sst extends State<mappy> {
  late GoogleMapController mapController;
  late Set<Marker> _markers;
  Set<Marker> _zipCodeMarkers = {}; // 移除final修饰符
  final LatLng _center = const LatLng(42.3314, -83.0458);
  static const MarkerId markerId = MarkerId('Detroit');

  @override
  void initState() {
    super.initState();
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    _initZipCodeMarkers(); // 地图创建完成后初始化Marker
  }

  void _initZipCodeMarkers() {
    setState(() {
      _zipCodeMarkers.addLabelMarker(LabelMarker(
        label: 'Static Marker',
        markerId: MarkerId('static_marker'),
        position: LatLng(42.411740, -83.058110),
        backgroundColor: Colors.blue,
        textStyle: TextStyle(
          fontSize: 45,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Detroit'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          compassEnabled: true,
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.5,
          ),
          markers: _zipCodeMarkers,
        ),
      ),
    );
  }
}

方案2：在initState中初始化并触发状态更新

如果需要在initState中初始化Marker，只需在添加Marker后调用setState通知框架更新：

@override
void initState() {
  super.initState();
  _initZipCodeMarkers();
}

void _initZipCodeMarkers() {
  _zipCodeMarkers.addLabelMarker(LabelMarker(
    label: 'Static Marker',
    markerId: MarkerId('static_marker'),
    position: LatLng(42.411740, -83.058110),
    backgroundColor: Colors.blue,
    textStyle: TextStyle(
      fontSize: 45,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ));
  setState(() {}); // 触发UI重新构建，让GoogleMap识别新Marker
}

额外检查 #

确认addLabelMarker扩展方法能正确将LabelMarker转换为GoogleMap支持的Marker对象，避免转换逻辑错误导致Marker无法被识别。

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