在 Flutter Google 地图中，如何根据实时数据库侦听器添加和删除标记

Question

我已经阅读了许多文档，帖子等，但似乎无法让事情发挥作用。

我有一个实时数据库侦听器，可以在FirebaseAnimatedList中提供纬度/经度坐标。当提供坐标时，我希望它在地图上放置一个标记。当坐标不存在时，应该删除标记(我在代码中还没有走那么远，我什至无法显示标记(。

我像这样创建标记和控制器：

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,
            ),

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

Answer 1

GoogleMap Widget 在构建过程中渲染地图和标记。如果标记列表有更改，则需要重新构建小部件。可用于存储标记的一种方法是使用 Map

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

。并调用setState()以将更改存储在地图中，并重建Google地图小部件。

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

然后将标记设置为GoogleMap.markers()

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

您可以查看google_maps_flutter插件提供的完整示例作为指南。