如何使用 GoogleMap 并将数据从 firestore 数据库放入数组？

Question

如何使用 GoogleMap 并从 firestore 数据库中获取放入数组的数据？

现在我可以使用默认数据并在GoogleMap中实现已使用的标记，但是我需要从firestore数据库中获取数据，那我该怎么做呢？

在我的代码中，

final Completer<GoogleMapController> _controller = Completer();

  List<String> images = [
    'assets/accomodation.png',
    'assets/beach.png',
    'assets/boat.png',
    'assets/campsite.png',
  ];

  Uint8List? markerImage;
  final List<Marker> _markers = <Marker>[];
  final List<LatLng> _latLang = <LatLng>[
    LatLng(33.6941, 72.9734),
    LatLng(33.7008, 72.9682),
    LatLng(33.6992, 72.9744),
    LatLng(33.6939, 72.9771),
    LatLng(33.6910, 72.9807),
    LatLng(33.7036, 72.9785)
  ];

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(33.6910, 72.98072),
    zoom: 15,
  );

  Future<Uint8List> getBytesFromAsset(String path, int width) async {
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
        .buffer
        .asUint8List();
  }

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

  loadData() async {
    for (int i = 0; i < images.length; i++) {
      final Uint8List markerIcon =
          await getBytesFromAsset(images[i].toString(), 100);
      _markers.add(Marker(
          markerId: MarkerId(i.toString()),
          position: _latLang[i],
          icon: BitmapDescriptor.fromBytes(markerIcon),
          infoWindow: InfoWindow(title: 'The title of the marker')));
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: mobileBackgroundColor,
        centerTitle: false,
        title: SvgPicture.asset(
          'assets/yomate_new_logo.svg',
          color: primaryColor,
          height: 32,
        ),
      ),
      body: SafeArea(
        child: GoogleMap(
          initialCameraPosition: _kGooglePlex,
          mapType: MapType.normal,
          myLocationButtonEnabled: true,
          myLocationEnabled: true,
          markers: Set<Marker>.of(_markers),
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
        ),
      ),
    );
  }

可以给我出出主意吗？

我尝试使用这种方法，但我没有任何想法并且出现错误......

final List<LatLng> _latLang = <LatLng>[];


loadData() async {
    await FirebaseFirestore.instance.collection('Campsite').get().then(
      (value) {
        setState(() {
          List.from(value.data['CamperSiteLatitude']).forEach((element) {
            LatLng data = new LatLng(element);
            _latLang.add(data);
          });
        });
      },
    );
  }

这是我的数据格式...每个数据都有 CamperSiteLatitude & CamperSiteLongitude

我可以自定义 markerIcon 吗？如果数据类型是campsite，希望可以显示assets/campsite.png，数据类型是accomodation show assets/accomodation.png'，数据类型是beach show assets/beach.png'，数据类型是boat ramp show 'assets/boat.png'

Answer 1

试过这个

loadData() async {
    final Uint8List markerIcon =
        await getBytesFromAsset('assets/campsite.png', 100);
    await FirebaseFirestore.instance.collection('Campsite').get().then(
      (querySnapshot) {
        querySnapshot.docs.forEach((element) {
          _markers.add(
            Marker(
              markerId: MarkerId(element.data()['CamperSiteID']),
              position: LatLng(element.data()['CamperSiteLatitude'],
                  element.data()['CamperSiteLongitude']),
              icon: BitmapDescriptor.fromBytes(markerIcon),
              infoWindow: InfoWindow(
                title: element.data()['CamperSiteName'],
              ),
            ),
          );
          setState(() {});
          print(element.data()['type']);
        });
      },
    );
  }

如何使用 GoogleMap 并将数据从 firestore 数据库放入数组？

How can use GoogleMap and get data put into array from firestore database?

firebase

flutter

google-cloud-firestore