在地图上显示 firebase 子集合的引脚 - Flutter
Posted
技术标签:
【中文标题】在地图上显示 firebase 子集合的引脚 - Flutter【英文标题】：Show pins of a subcollection of firebase on map - Flutter 【发布时间】：2020-12-23 02:38:25 【问题描述】：我有一个应用程序可以从 firebase 读取停车数据并在地图上显示一些图钉。现在应用程序只显示停车场的图钉，但我还想在地图上添加保存在 Parkings 集合的“lots”子集合中的每个停车场的图钉。我该怎么做？
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],
),
);
【问题讨论】：
document.collection("lots").get('location').latitude 不起作用，因为您在 collection("lots") 之后没有指定任何文档 写 document.collection("lots").document("h6nU1Gyx4Tlb5rpGYi5e").get('location').latitude 也不起作用 【参考方案1】：document.collection("lots").document("DocumentId").get('location').latitude 不起作用的原因是您不应该将字段名称传递给 get 方法。同样在您的代码中，document 只是一个文档快照，因此您要做的是获取该文档的 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)),
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 并查看所有标记。
【讨论】：
我收到此错误：方法 'collection' 没有为类型 'DocumentSnapshot' 定义。\n尝试将名称更正为现有方法的名称，或定义一个名为 'collection' 的方法'。” 看看我更新的解决方案并检查它是否有效 我将它添加到一个函数中。我可以在控制台上看到纬度，但我不知道如何将其连接到标记中的 LatLong(...) 以便在 UI 上显示它们。 您可以使用此代码获取坐标。您也可以使用相同的代码创建一个函数，但它必须返回一个标记列表，因此您需要在函数中创建标记。然后使用该列表并在小部件树中创建标记。当你有标记列表时，你可以在 initState 中调用函数并调用 setState 我试过了（请看我添加的最后一条鳕鱼），但标记不会出现。以上是关于在地图上显示 firebase 子集合的引脚 - Flutter的主要内容，如果未能解决你的问题，请参考以下文章