FlutterFirebase無法獲取google-map的標記

我必須撰寫一個應用程式來顯示來自 uni 的 firebase 標記。我設法讓在本地創建的標記顯示出來，但我似乎無法從 Firebase 作業中獲取標記。我猜這與我如何從 firebase 檢索資料有關，但我自己找不到原因。我正在從 firebase 加載影像并創建卡片，但這是不同的。

我正在嘗試從 Firebase 中檢索資料，如下所示：

getMarkerData() async{
 FirebaseFirestore.instance.collection('buildings').get().then((data){
   if(data.docs.isNotEmpty){
     for(int i = 0; i < data.docs.length; i  ){
       initMarker(data.docs[i].data, data.docs[i].id);
     }
   }
 });
}

然后嘗試從這樣的資料中創建標記：

GoogleMapController? mapController;
Location location = new Location();
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

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'], snippet: specify['adresse'])
  );
  setState(() {
    markers[markerId] = marker;
  });
}

我正在呼叫getMarkerData()函式initState()：

@override
void initState() {
    getMarkerData();
    super.initState();
}

然后使用谷歌地圖小部件中的標記：

GoogleMap(
  markers: Set<Marker>.of(markers.values),
  myLocationEnabled: true,
  myLocationButtonEnabled: true,
  mapType: MapType.normal,
  initialCameraPosition: _initialCameraPosition,
  onMapCreated: _onMapCreated,
),

這是我的 _onMapCreated 函式

void _onMapCreated(GoogleMapController mapController) async
{
    setState(() {
      mapController = mapController;
      location.onLocationChanged.listen((l) {
      });
    });
}

這是整個代碼（帶有折疊的抽屜）：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:mobs/routes/all_allert.dart';

//home seite
class Home extends StatefulWidget {
final User user;

const Home({Key? key, required this.user}) : super(key: key);

@override
State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
User? _currentUser = FirebaseAuth.instance.currentUser;

static const _initialCameraPosition = CameraPosition(
target: LatLng(54.332678239573355, 10.180124654249582),
zoom: 16,
);

final list = FirebaseFirestore.instance.collection("buildings");

GoogleMapController? mapController;
Location location = new Location();

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

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'], snippet: specify['adresse']));
setState(() {
  markers[markerId] = marker;
});
}

getMarkerData() async {
FirebaseFirestore.instance.collection('buildings').get().then((data) {
  if (data.docs.isNotEmpty) {
    for (int i = 0; i < data.docs.length; i  ) {
      initMarker(data.docs[i].data, data.docs[i].id);
    }
  }
});
}

@override
void initState() {
getMarkerData();
super.initState();
}

Widget build(BuildContext context) {
return WillPopScope(
  onWillPop: () async => false,
  child: Scaffold(
    appBar: AppBar(
      //titel zeile der home seite
      centerTitle: true,
      title: Visibility(
        child: Text('Hallo ${_currentUser!.displayName}!'),
        maintainSize: false,
        maintainAnimation: true,
        maintainState: true,
        visible: !_currentUser!.isAnonymous,
      ),
      backgroundColor: const Color(0xff08345c),
    ),
    drawer: Drawer(...),
    body: GoogleMap(
      markers: Set<Marker>.of(markers.values),
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      mapType: MapType.normal,
      initialCameraPosition: _initialCameraPosition,
      onMapCreated: _onMapCreated,
    ),
  ),
);
}

void _onMapCreated(GoogleMapController mapController) async {
setState(() {
  mapController = mapController;
  location.onLocationChanged.listen((l) {});
});
}
}

和一張應用程式的圖片，以備不時之需。

uj5u.com熱心網友回復：

你的問題是那getMarkerData()是一個async函式，但你不能用await它來等待它的結果initState，因為initState它不能是一個async函式。因此，GoogleMap小部件將在收到標記的資料之前構建。

一種常見的解決方案是使用 a FutureBuilder，請參見此處：使用 future 獲取資料并僅在接收到資料后使用獲取的標記資料進行構建GoogleMap，同時顯示進度指示器。

注意：有人可能會爭辯說，setState在這種情況下，在接收標記資料時使用應該可以作業，因為GoogleMap小部件將被重建。我不是 100% 確定，但根據我的記憶，這種方法只有在您更改整個標記集時才有效，并且不反映像markers[markerId] = marker;. 但是，如果您愿意，可以嘗試一下，確保首先收集所有標記，然后setState更新傳遞給GoogleMap小部件的整個標記集markers。

標籤：

上一篇：將地理點與地圖上的道路匹配

下一篇：單擊標記時，我不希望相機移動