如何将Firebase RTDB自定义标记加载到Flutter谷歌地图供所有用户查看并修复显示异常

问题核心原因 #

• 所有标记使用了固定重复的MarkerId：Set<Marker>集合要求元素唯一，ID相同的新标记会直接覆盖旧标记，最终只能保留最后一个遍历到的标记，这是无法加载全部标记的核心原因。
• 未触发UI重绘：你注释了setState调用，修改_markers集合后Flutter不会通知Google Map组件刷新，界面不会展示更新后的标记。
• 单次读取无法实现实时更新：once()方法只会拉取一次云端数据，用户后续发布新帖子、更新标记时，本地不会同步最新数据。
• 未关联posts字段到标记，无法实现点击展示帖子的需求。

修正后完整代码 #

Set<Marker> _markers = {};

void _activeListeners() {
  final db = FirebaseDatabase.instance.reference().child("users");
  // 换成onValue监听实现实时同步，数据变化自动触发回调
  db.onValue.listen((event) {
    // 先清空旧标记，避免重复叠加
    _markers.clear();
    Map<dynamic, dynamic> values = event.snapshot.value;
    values.forEach((key, userData) {
      final markerData = userData['marker'];
      // 用用户uid作为MarkerId，保证全局唯一
      final markerId = MarkerId(key);
      _markers.add(
        Marker(
          position: LatLng(markerData["latitude"], markerData["longitude"]),
          markerId: markerId,
          // 内置infoWindow展示帖子内容，点击标记自动弹出
          infoWindow: InfoWindow(
            title: userData['username'],
            snippet: markerData['posts'],
          ),
          onTap: () {
            // 也可以在这里写自定义弹窗逻辑，替换内置infoWindow
          },
        ),
      );
    });
    // 调用setState触发UI刷新，更新地图上的标记
    setState(() {});
  });
}

额外注意事项 #

如果你的业务允许没有marker的用户存在，遍历的时候需要加判空逻辑，避免markerData为空导致的崩溃：

if (userData['marker'] != null) {
  // 执行添加Marker的逻辑
}

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