使用 Firestore 中的纬度和经度向 Google 地图 Flutter 添加标记答案

【问题标题】：Add markers to Google maps Flutter using latitude and longitude from Firestore使用 Firestore 中的纬度和经度向 Google 地图 Flutter 添加标记
【发布时间】：2021-09-22 19:30:40
【问题描述】：

对于我的 Flutter 应用程序，我正在尝试向谷歌地图添加标记。然而，标记没有出现在地图上。我已经在 Firestore 中存储了纬度和经度。纬度和经度都是 Firestore 上的类型编号。我没有将它们存储在地理点中。

Here 是我的 Firestore 数据库的屏幕截图。

这是我从 Firestore 获取标记数据的代码：

String uid = FirebaseAuth.instance.currentUser.uid;
CollectionReference users = FirebaseFirestore.instance.collection('users');

  getMarkerData() {
    users
        .doc(uid)
        .collection('family')
        .get()
        .then((QuerySnapshot querySnapshot) {
      querySnapshot.docs.forEach((doc) {
        initMarker(doc['latitude'], doc['longitude'], doc['name']);
      });
    });
  }

所以这是将纬度和经度数据分配给标记的代码：

  void initMarker(lat, long, name) async {
    LatLng latlng = LatLng(lat, long);
    var markerIdVal = name;
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      position: latlng,
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

【问题讨论】：

您能否从 Firestore 获取标记的数据？您可能会发现这很有用stackoverflow.com/questions/55000043/…
所以，我最终将我的位置数据类型更改为 Firestore 上的 GeoPoint，而不是使用单独的纬度和经度并将其存储为数字。我还更改了一些代码，现在标记终于显示出来了。

标签： firebase flutter google-maps google-cloud-firestore

【解决方案1】：

所以我已经解决了这个问题。

我解决问题的方法是：

我首先将我的位置数据存储在 GeoPoint 中。

  //Get user location and update it in Firestore
  Future<void> updateUserLocation(LocationData newLocalData) {
    return users
        .doc(uid)
        .update({
          'location': GeoPoint(newLocalData.latitude, newLocalData.longitude),
        })
        .then((value) => print("User Updated"))
        .catchError((error) => print("Failed to update user: $error"));
  }

在这种情况下，我从 Firestore 的子集合中检索了位置数据。您可以根据您的项目从任何您想要的集合中获取它。

  String uid = FirebaseAuth.instance.currentUser.uid;
  CollectionReference users = FirebaseFirestore.instance.collection('users');

  getMarkerData() {
    users
        .doc(uid)
        .collection('family')
        .get()
        .then((QuerySnapshot querySnapshot) {
      querySnapshot.docs.forEach((doc) {
        initMarker(doc.data(), doc.id);
      });
    });
  }

初始化标记

void initMarker(specify, specifyId) async {
    var markerIdVal = specifyId;
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      position:
          LatLng(specify['location'].latitude, specify['location'].longitude),
      infoWindow: InfoWindow(title: specify['name']),
    );
    setState(() {
      markers[markerId] = marker;
      //print(markerId);
    });
  }

在地图上显示标记

    return Scaffold(
      body: GoogleMap(
        markers: Set<Marker>.of(markers.values),
        //markers: getMarkerData(), the markers didn't show up if i use this, so i use the above instead
        mapType: MapType.normal,
        zoomControlsEnabled: true,
        initialCameraPosition: initialLocation,
        onMapCreated: (GoogleMapController controller) {
          controller = controller;
        },
      ),
    );

【讨论】：