在地图上显示 firebase 子集的图钉 - Flutter

Question

我有一个应用程序可以从 firebase 读取停车数据并在地图上显示一些图钉。现在应用程序只显示停车位的引脚，但我还想在地图上添加保存在 Parkings 集合的“地段”子集合中的每个停车场的引脚。我该怎么做？

maps.dart:

class StoreMap extends StatelessWidget {
  StoreMap({
    Key key,
    @required this.documents,
    @required this.initialPosition,
  }) : super(key: key);

  
  final List<DocumentSnapshot> documents;
  final LatLng initialPosition;
  final Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _initialPosition = CameraPosition(
    target: LatLng(45.791789, 24.150390),
    zoom: 16,
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _initialPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true,
        markers:documents.map((document) => new Marker(
                  markerId: MarkerId(document.get('name')),
                  position: LatLng(
                    document.get('location').latitude,
                    document.get('location').longitude,
                  ),
                  onTap: () => _changeMap(LatLng(
                    document.get('location').latitude,
                    document.get('location').longitude,
                  )),
                  infoWindow: InfoWindow(
                      title: document.get('name'),
                      snippet: document.get('numberOfLots')),
             icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueViolet)),
                )
            .toSet()
      ),
  floatingActionButton: FloatingActionButton(
        onPressed: _currentLocation,
        child: Icon(Icons.location_searching),
        backgroundColor: Colors.deepPurple[400],
      ),
    );
  }

Answer 1

document.collection("lots").document("DocumentId").get('location').latitude 不起作用的原因是您不应该将字段名称传递给 get 方法。同样在您的代码中，文档只是文档快照，因此您要做的是获取该文档的 ID，然后访问其子集合和子文档。

你可以做的是这样的：

//The code below gets the document ids of the parking collection
//gets access the sub collection "lots" and gets all the documents inside it.
//and for every sub document, gets the data and prints the latitude of the location field
for (DocumentSnapshot document in documents){
    String documentId = document.documentId;
    DocumentReference parkingDocReference = 
    Firestore.instance.collection("Parkings").document(documentId);
    parkingDocReference.collection("lots")
    .get((QuerySnapshot subDocuments){
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots){
         String subDocId = subDoc.documentId;
         parkingDocReference.collection("lots")
         .document(subDocId).get().then((DocumentSnapshot snapshot){ 
             print(snapshot.data["location"].latitude); //prints the latitude;
         }
  
     }
  });

}

get() 将 return Future<DocumentSnapshot> 这就是我们在 get() 之后使用 .then() 的原因，以便该函数仅运行在检索数据时

更新： 为了在地图上看到标记，我们将上面的代码放在函数 which returns Future<List<Marker>> 中。当结果为 returned 时，您可以调用 setState 并在您的小部件树中使用更新后的列表。

最好使用 async/await 而不是 then，因为它会强制程序先从未来获取结果。

Future<List<Marker>> _createMarkersForLotsAndParkings() async{
   List<Marker> markersList = [];
   int markerId = 0;
   for (DocumentSnapshot document in widget.documents){
    // ignore: deprecated_member_use
    String documentId = document.documentID;
    DocumentReference parkingDocReference = 
    // ignore: deprecated_member_use
    Firestore.instance.collection("Parkings").document(documentId);
    DocumentSnapshot parkingDocRef = await parkingDocReference.get();
    markersList.add(Marker(
                  markerId: MarkerId(markerId.toString()),
                  position: LatLng(parkingDocRef.get('location').latitude,
                      parkingDocRef.get('location').longitude),
                  onTap: () => _changeMap(LatLng(
                      parkingDocRef.get('location').latitude,
                      parkingDocRef.get('location').longitude)),
                  infoWindow: InfoWindow(
                      title: document.get('name'),
                      snippet: document.get('numberOfLots')),
                  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueYellow)),
            );
            markerId++;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    // ignore: deprecated_member_use
    // ignore: deprecated_member_use
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots){
         // ignore: deprecated_member_use
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         // ignore: deprecated_member_use
         .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)),
                  infoWindow: InfoWindow(
                      title: document.get('name'),
                      snippet: document.get('numberOfLots')),
                  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueViolet)),
            );
            markerId++;

     }

}
return Future.value(markersList);

}

我们在initState()中调用这个函数。您需要将 StoreMap 转换为 StatefullWidget 才能调用 setState 并使用 initState:


@override
  void initState() {
    super.initState();
    _createMarkersForLots().then((List<Marker> lotsMarkers){
    setState((){
    markers = lotsMarkers; //rebuilds the screen with the lotsMarkers. make sure to use the markers in your widget tree to see the markers
  });
    
});
}

您的完整代码必须如下所示：

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

class StoreMap extends StatefulWidget {
  StoreMap({
    Key key,
    @required this.documents,
    @required this.initialPosition,
  }) : super(key: key);

  final List<DocumentSnapshot> documents;
  final LatLng initialPosition;
  static final CameraPosition _initialPosition = CameraPosition(
    target: LatLng(45.791789, 24.150390),
    zoom: 16,
  );


  @override
  _StoreMapState createState() => _StoreMapState();
}

class _StoreMapState extends State<StoreMap> {
  final Completer<GoogleMapController> _controller = Completer();


List<Marker> markers = [];
Future<List<Marker>> _createMarkersForLotsAndParkings() async{
   List<Marker> markersList = [];
   int markerId = 0;
   for (DocumentSnapshot document in widget.documents){
    // ignore: deprecated_member_use
    String documentId = document.documentID;
    DocumentReference parkingDocReference = 
    // ignore: deprecated_member_use
    Firestore.instance.collection("Parkings").document(documentId);
    DocumentSnapshot parkingDocRef = await parkingDocReference.get();
    markersList.add(Marker(
                  markerId: MarkerId(markerId.toString()),
                  position: LatLng(parkingDocRef.get('location').latitude,
                      parkingDocRef.get('location').longitude),
                  onTap: () => _changeMap(LatLng(
                      parkingDocRef.get('location').latitude,
                      parkingDocRef.get('location').longitude)),
                  infoWindow: InfoWindow(
                      title: document.get('name'),
                      snippet: document.get('numberOfLots')),
                  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueYellow)),
            );
            markerId++;
    QuerySnapshot subDocuments = await parkingDocReference.collection("lots").get();
    // ignore: deprecated_member_use
    // ignore: deprecated_member_use
    List<DocumentSnapshot> subDocumentsSnapshots = subDocuments.documents;
    for (DocumentSnapshot subDoc in subDocumentsSnapshots){
         // ignore: deprecated_member_use
         String subDocId = subDoc.documentID;
         DocumentSnapshot snapshot = await parkingDocReference.collection("lots")
         // ignore: deprecated_member_use
         .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)),
                  infoWindow: InfoWindow(
                      title: document.get('name'),
                      snippet: document.get('numberOfLots')),
                  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueViolet)),
            );
            markerId++;
  
     }

}
return Future.value(markersList);

}

@override
  void initState() {
    super.initState();
    _createMarkersForLotsAndParkings().then((List<Marker> lotsMarkers){
    setState((){
    markers = lotsMarkers; 
  });
    
});
}


  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        zoomGesturesEnabled: true,
        mapType: MapType.hybrid,
        initialCameraPosition: StoreMap._initialPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true,
        markers: markers.toSet(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _currentLocation,
        child: Icon(Icons.location_searching),
        backgroundColor: Colors.deepPurple[400],
      ),
    );
  }

  void _currentLocation() async {
    final GoogleMapController controller = await _controller.future;
    LocationData currentLocation;
    var location = new Location();
    try {
      currentLocation = await location.getLocation();
    } on Exception {
      currentLocation = null;
    }

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(currentLocation.latitude, currentLocation.longitude),
        zoom: 18.0,
      ),
    ));
  }

  _changeMap(LatLng position) async {
    final GoogleMapController controller = await _controller.future;

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(position.latitude, position.longitude),
        zoom: 19.4,
      ),
    ));
  }
}

Google 地图为具有相同 ID 的标记显示一个标记，因此我们使用 markerId 为每个标记赋予一个唯一的 ID 并查看所有标记。

在地图上显示 firebase 子集的图钉 - Flutter

Show pins of a subcollection of firebase on map - Flutter

maps

google-maps-markers

firebase

flutter

google-cloud-firestore