首页 > 解决方案 > 如何从 FirebaseFirestore 在 GoogleMap 上添加自定义标记?

问题描述

我正在尝试显示来自 firestore 数据库的多个标记(仅那些距离小于 2000 的标记)。但不幸的是,我没有得到想要的输出。

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

    _getCurrentLocation();

  }



 _getCurrentLocation() async {

    setCustomMarker();
    await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
        .then((Position position) async {

      setState(() {
        _currentPosition = position;
        print('CURRENT POS: $_currentPosition');
        mapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              target: LatLng(position.latitude, position.longitude),
              zoom: 18.0,
            ),
          ),
        );
      });
      await _getAddress();
    }).catchError((e) {
      print(e);
    });
  }

  void setCustomMarker() async{
    customIcon=await BitmapDescriptor.fromAssetImage(ImageConfiguration(devicePixelRatio: 2.5), 'Assets/pointer.jpg');

    getVolunteersLocations();
  }
  getVolunteersLocations()async{


    print('get volunteer location called ');
    FirebaseFirestore.instance.collection('Volunteers').get().then((doces) {
      if (doces.docs.isNotEmpty) {

        for (int i = 0; i < doces.docs.length; ++i) {

          var distance=Geolocator.distanceBetween(_currentPosition.latitude, _currentPosition.longitude, doces.docs[i].get('lat'),doces.docs[i].get('lng') );

          print('distance $distance');
          if(distance <2000){
            print('get name ${doces.docs[i].get('v_name')}');

            maarkr.add(Marker(
              markerId: MarkerId(doces.docs[i].get('v_name')),
              position: LatLng(doces.docs[i].get('lat'), doces.docs[i].get('lng')),
              infoWindow: InfoWindow(
                title: 'Start ${doces.docs[i].get('v_name')}',
                snippet: _startAddress,
              ),
              icon:customIcon,
            ));



          }

        }
      }
    });
  }

这是谷歌地图,脚手架中的小部件(构建方法)。我不知道我在做什么,任何帮助将不胜感激。

GoogleMap(
              markers: maarkr.toSet(),
              initialCameraPosition: _initialLocation,
              myLocationEnabled: true,
              myLocationButtonEnabled: false,
              mapType: MapType.normal,
              zoomGesturesEnabled: true,
              zoomControlsEnabled: false,
              polylines: Set<Polyline>.of(polylines.values),
              onMapCreated: (GoogleMapController controller) {
                mapController = controller;
              },
            ),

标签: firebasefluttergoogle-mapsgoogle-cloud-firestoregoogle-maps-markers

解决方案


推荐阅读