Flutter - 使用 StreamBuilder 提供对谷歌地图的实时更新答案

【问题标题】：Flutter - Provide Real-Time Updates to Google Maps Using StreamBuilderFlutter - 使用 StreamBuilder 提供对谷歌地图的实时更新
【发布时间】：2020-08-12 08:04:11
【问题描述】：

我目前正在构建一个在 Google 地图上显示标记的应用程序。标记的位置是从 Firestore 数据库中提取的。目前，我正在成功检索和显示所有标记。但是，我需要根据数据库中的布尔值更新每个标记的图标。

这是我当前显示标记的方式。

我在主构建中创建地图：

Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: mapToggle
              ? GoogleMap(
            onMapCreated: onMapCreated,
            compassEnabled: false,
            polylines: route,
            initialCameraPosition: CameraPosition(
                target: LatLng(currentLocation.latitude,
                    currentLocation.longitude),
                zoom: 12),
            markers: markers,
          )
              : Center(
            child: Text('Loading... Please wait...',
                style: TextStyle(fontSize: 20.0)),
          )),

然后我在 initState 中调用这个函数来获取我的标记：

chargePoints() {
_database.collection('charge_points').getDocuments().then((docs) {
  if (docs.documents.isNotEmpty) {
    for (int i = 0; i < docs.documents.length; i++) {
      initMarker(docs.documents[i].data, docs.documents[i].documentID);
    }
  }
});

最后，initMarker 函数将每个标记添加到 Set 标记中，由 Google Map 实例获取：

void initMarker(chargePoint, documentID) {
var markerIdVal = documentID;
final MarkerId markerId = MarkerId(markerIdVal);

// Creating a new Charge Point Marker
final Marker marker = Marker(
    markerId: markerId,
    icon: markerIcon,
    position: LatLng(chargePoint['location'].latitude,
        chargePoint['location'].longitude),
    infoWindow: InfoWindow(
        title: chargePoint['name'], snippet: chargePoint['type']),
    onTap: () {
      findBookings(context, chargePoint, documentID);
    });

setState(() {
  markers.add(marker);
});

所以我的问题是；当“占用”字段已更改时，如何将此数据作为流返回，并提供一个更新相应标记图标的侦听器？

Firestore

Map UI

【问题讨论】：

标签： google-maps flutter google-cloud-firestore google-maps-markers stream-builder

【解决方案1】：

好的，我有办法了！

我现在在主构建小部件中返回一个 StreamBuilder，它采用 Firestore 查询来返回所有标记的详细信息。

然后我使用流提供的快照间歇性地转换上面 initMarker 函数中设置的所有标记的状态。

此外，标记集现在是一个地图。这对于访问标记以执行更新更有意义。

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

标记使用它们的 MarkerId 进行管理，它与快照中返回的所有结果的 documentID 相关。

我不相信这个解决方案是完美的，但我希望我已经帮助了某人！

StreamBuilder<QuerySnapshot>(
      stream: _servicesObj.getChargePoints(),
      builder:
          (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return Text('Loading Points');
        }

        snapshot.data.documents.forEach((change) {
          var markerIdVal = change.documentID;
          final MarkerId markerId = MarkerId(markerIdVal);

          if (change.data['occupied'] == true) {
            markers[markerId] = Marker(
                markerId: markerId,
                icon: pointOccupiedIcon,
                position: LatLng(change.data['location'].latitude,
                    change.data['location'].longitude),
                infoWindow: InfoWindow(
                    title: change.data['name'],
                    snippet: change.data['type']),
                onTap: () {
                  findBookings(context, change.data, change.documentID);
                });
          } else {
            markers[markerId] = Marker(
                markerId: markerId,
                icon: pointAvailableIcon,
                position: LatLng(change.data['location'].latitude,
                    change.data['location'].longitude),
                infoWindow: InfoWindow(
                    title: change.data['name'],
                    snippet: change.data['type']),
                onTap: () {
                  findBookings(context, change.data, change.documentID);
                });
          }
        });

【讨论】：