Flutter - 一段时间后自动刷新地图上的标记图标

Posted 2023-02-23

【中文标题】Flutter - 一段时间后自动刷新地图上的标记图标

【英文标题】：Flutter - auto-refresh marker's icon on map after a period of time

【发布时间】：2020-12-24 18:01:56

【问题描述】：

我有一些标记，标记的图标会根据 Firebase 字段（称为状态）而变化。状态是一个布尔值（真/假）。数据库中的此状态值经常由外部应用程序更改，因此我需要能够根据字段的当前值更新图标。如何自动更新 UI 上的标记？

这是我的代码：

BitmapDescriptor customFreeLotIcon, customOccupiedLotIcon;
Future<List<Marker>> _createMarkersForLotsAndParkings() async
   List<Marker> markersList = [];
   int markerId = 0;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots)
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         .document(subDocId).get();
            print(snapshot.get('location').latitude);
            markersList.add(
              Marker(
                  markerId:MarkerId(markerId.toString()),
                  position: LatLng(snapshot.get('location').latitude,
                      snapshot.get('location').longitude),
                  onTap: () => _changeMap(LatLng(
                      snapshot.get('location').latitude,
                      snapshot.get('location').longitude)),
                  icon: snapshot.get('status') == true ? customOccupiedLotIcon : customFreeLotIcon ),
            );
            markerId++;      
     

return Future.value(markersList);




 createCustomImageForParkingsMarkers(context)
    if (customFreeLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/freeLots.png')
          .then((icon) 
        setState(() 
          customFreeLotIcon = icon;
        );
      );
    
    else if (customOccupiedLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/occupiedLots.png')
          .then((icon) 
        setState(() 
          customOccupiedLotIcon = icon;
        );
      );
    
  

【参考方案1】：

尝试添加监听器：

BitmapDescriptor customFreeLotIcon, customOccupiedLotIcon;
Future<List<Marker>> _createMarkersForLotsAndParkings() async
   List<Marker> markersList = [];
   int markerId = 0;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots)
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         .document(subDocId).snapshots()
        .listen((DocumentSnapshot documentSnapshot) async 
      Map<String, dynamic> document = documentSnapshot.data();
            print(document['location'].latitude);
            markersList.add(
              Marker(
                  markerId:MarkerId(markerId.toString()),
                  position: LatLng(document['location'].latitude,
                      document['location'].longitude),
                  onTap: () => _changeMap(LatLng(
                     document['location'].latitude,
                      document['location'].longitude)),
                  icon: document['status'] == true ? customOccupiedLotIcon : customFreeLotIcon ),
            );
            markerId++;   
   
     

return Future.value(markersList);




 createCustomImageForParkingsMarkers(context)
    if (customFreeLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/freeLots.png')
          .then((icon) 
        setState(() 
          customFreeLotIcon = icon;
        );
      );
    
    else if (customOccupiedLotIcon == null) 
      ImageConfiguration configuration = createLocalImageConfiguration(context);
      BitmapDescriptor.fromAssetImage(configuration, 'assets/occupiedLots.png')
          .then((icon) 
        setState(() 
          customOccupiedLotIcon = icon;
        );
      );
    
  

在此处添加Setstate()：

setState(() 
      markersList.add(
        Marker(
            markerId:MarkerId(markerId.toString()),
            position: LatLng(document['location'].latitude,
                document['location'].longitude),
            onTap: () => _changeMap(LatLng(
                document['location'].latitude,
                document['location'].longitude)),
            icon: document['status'] == true ? customOccupiedLotIcon : customFreeLotIcon ),
      );
      markerId++;
    );

【讨论】：

嗨@Amon Chowdhury！在这一行 code DocumentSnapshot 快照 = await parkDocReference.collection("lots").document(subDocId).snapshots().listen((DocumentSnapshot documentSnapshot) async code 我收到此错误：'StreamSubscription 类型的值' 无法分配给“DocumentSnapshot”类型的变量。尝试更改变量的类型，或将右侧类型转换为“DocumentSnapshot”。snipboard.io/k37wQP.jpg

我试图改变它： StreamSubscription snapshot = await parkDocReference.collection("lots").document(subDocId).snapshots().listen((DocumentSnapshot documentSnapshot) async 但是引脚不会更新

在监听器中使用 setsate

你能告诉我怎么做吗？我是飞镖和颤振的初学者:(

非常感谢！现在我明白您所说的在侦听器中使用 setstate 的意思了！