Firebase LatLng的Google Maps标记未显示在地图上

问题描述

我正在尝试从Firebase在Google地图上添加一些标记，但无法弄清楚标记为什么未显示在Google地图上（在用户界面上）。有人可以帮我还是建议我更新教程？

void main() => runApp(Parkings());

class Parkings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '...',home: MapSample(),debugShowCheckedModeBanner: false,);
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  final FirebaseFirestore _database = FirebaseFirestore.instance;
  Completer<GoogleMapController> _controller = Completer();
  Map<MarkerId,Marker> markers = <MarkerId,Marker>{};

  void _changeMap(LatLng position) async {
    final GoogleMapController controller = await _controller.future;

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,target: LatLng(position.latitude,position.longitude),zoom: 20.0,),));
  }

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

这是我尝试获取数据并创建标记的方法：

  addParkings() {
    _database
        .collection('places')
        .where('name',isEqualTo: "School")
        .where('name',isEqualTo: "Theatre")
        // ignore: deprecated_member_use
        .getDocuments()
        .then((docs) {
      // ignore: deprecated_member_use
      if (docs.documents.isNotEmpty) {
        // ignore: deprecated_member_use
        for (int i = 0; i < docs.documents.length; i++) {
          // ignore: deprecated_member_use
          initMarker(docs.documents[i].data,docs.documents[i].documentID);
        }
      }
    });
  }

  void initMarker(parking,parkingid) {
    var markerIdVal = parkingid;
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,position: LatLng(parking['Latitud'],parking['Longitud']),infoWindow: InfoWindow(title: parking['name']),);

    setState(() {
      // adding a new marker to map
      markers[markerId] = marker;
    });
  }

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(45.7936,24.1213),zoom: 12.4746,);

在这里我在地图上添加标记：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Parking Wizard'),backgroundColor: Colors.deepPurpleAccent,body: GoogleMap(
          mapType: MapType.hybrid,initialCameraPosition: _kGooglePlex,onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },myLocationEnabled: true,markers: Set<Marker>.of(markers.values)),floatingActionButton: FloatingActionButton(
        onpressed: _currentLocation,);
  }

我使用此功能来获取设备的当前位置：

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,));
  }
}

解决方法

纬度和经度在Firestore中保存为字符串，而不是双精度。

// creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,position: LatLng(double.parse(parking['Latitud']),double.parse(parking['Longitud'])),//string to double
      infoWindow: InfoWindow(title: parking['name']),);

要完成您要执行的操作，更好的方法是使用Firestore软件包中的GeoPoint类。

If anyone needs a flutter application that shows markers (from firebase) on map here is an example:

map.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: 14,);
    
    
      @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) => Marker(
                      markerId: MarkerId(document.get('name')),position: LatLng(
                        document.get('location').latitude,document.get('location').longitude,),infoWindow: InfoWindow(
                          title: document.get('name'),)
                .toSet(),floatingActionButton: FloatingActionButton(
            onPressed: _currentLocation,child: Icon(Icons.location_searching),);
      }
    
       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,));
      }

home.dart：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Stream<QuerySnapshot> _parkingsDb;
  List<Marker> allMarkers = [];

  @override
  void initState() {
    super.initState();
    // ignore: deprecated_member_use
    _parkingsDb = Firestore.instance.collection('places').snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text('....'),backgroundColor: Colors.Blue,body: StreamBuilder<QuerySnapshot>(
          stream: _parkingsDb,builder: (context,snapshot) {
            if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }
            if (!snapshot.hasData) {
              return Center(child: const Text('Loading...'));
            }

            // ignore: deprecated_member_use
            return StoreMap(
                // ignore: deprecated_member_use
                documents: snapshot.data.documents,initialPosition: const LatLng(45.791789,24.150390));
          },));
  }
}

class StoreList extends StatelessWidget {
  const StoreList({
    Key key,}) : super(key: key);
  final List<DocumentSnapshot> documents;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: documents.length,itemBuilder: (builder,index) {
          final document = documents[index];
          return ListTile(
            title: Text(document.get('name')),subtitle: Text(document.get('location').toString()),);
        });
  }
}

P.S请记住，我是初学者，不知道这里是否有重大错误：）

dart firebase firebase google-maps google-maps-flutter