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

Question

我正在尝试在 google 地图上添加一些来自 firebase 的标记，但无法弄清楚为什么这些标记没有出现在 google 地图上（在 UI 上） .有人可以帮助我或建议我更新教程吗？

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

Answer 1

纬度和经度在 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 class。

Answer 2

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,
    @required this.documents,
  }) : 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 初学者谨记，不知道这里有没有大错:)

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

Google Maps Markers from Firebase LatLng don't appear on map

firebase

google-maps

flutter

dart

google-maps-flutter