firebase-realtime-database - 在 Flutter Google Maps 中，我如何根据实时数据库监听器添加和删除标记？

Question

我已阅读大量文档、帖子等，但似乎无法正常工作。

我有一个实时数据库监听器，它在 FirebaseAnimatedList 中提供纬度/经度坐标。提供坐标后，我希望它在 map 上放置一个标记。当坐标不存在时，应删除标记(我在代码中还没有深入，我什至无法显示标记)。

我这样创建标记和 Controller :

Set<Marker> markers = Set();
final Completer<GoogleMapController> _controller = Completer();

我在 FirebaseAnimatedList 中有以下代码来创建标记:

Marker userMarker;
              userMarker = Marker(
                markerId: MarkerId(id),
                position: LatLng(
                    lat, lon),
              );

              markers.add(userMarker);

然后我像这样在构建小部件中调用 GoogleMap:

GoogleMap(
              mapType: MapType.normal,
              myLocationEnabled: true,
              myLocationButtonEnabled: true,
              compassEnabled: true,
              initialCameraPosition: _kGooglePlex,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
              markers: markers,
            ),

当监听器拾取坐标时，不添加任何标记。如果在创建 map 时监听器已经有坐标，则仍然不会添加标记。如何根据监听器添加和删除标记？

Answer 1

GoogleMap小部件在构建期间呈现 map 和标记。如果您的标记列表发生变化，您需要重建小部件。一种可用于存储标记的方法是使用 Map

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

...并调用 setState() 来存储 map 中的更改，并重建 GoogleMap Widget。

setState(() {
  markers[markerId] = marker;
});

然后在 GoogleMap.markers() 上设置标记

GoogleMap(
  ...
  markers: markers.values.toSet(),
)

你可以查看这个完整的sample由 google_maps_flutter 提供插件作为指南。