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

如何解决在地图上显示Firebase子集合的图钉-Flutter

我有一个应用程序，该应用程序从firebase读取停车数据并在地图上显示的一些图钉。现在，该应用程序仅显示用于停车的图钉，但我还想在地图上添加保存在“停车”集合的“批次”子集合中的每个停车场的图钉。我该怎么办？

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,)),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],);
  }

解决方法

document.collection("lots").document("DocumentId").get('location').latitude不起作用的原因是，您不应该传递字段名称来获取方法。同样在您的代码中，文档只是文档快照，因此您要做的就是获取该文档的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（）将返回Future<DocumentSnapshot>，这就是我们在get（）之后使用.then（）的原因，以便该函数仅在检索到数据时运行

更新： 为了查看地图上的标记，我们将上面的代码放在返回Future<List<Marker>>的函数中。返回结果后，可以调用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)),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()),);
            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并查看所有标记的原因。