Ich versuche, einige Markierungen aus Firebase auf Google Maps hinzuzufügen und kann nicht herausfinden, warum die Markierungen nicht auf Google Maps (auf der Benutzeroberfläche) angezeigt werden. Kann mir jemand helfen oder mir ein aktualisiertes Tutorial vorschlagen?

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

So versuche ich, die Daten abzurufen und Marker zu erstellen:

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

Hier füge ich die Markierungen auf der Karte hinzu:

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

Ich benutze diese Funktion, um den aktuellen Standort des Geräts zu ermitteln:

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,
      ),
    ));
  }
}
0
Andreea Purta 1 Sept. 2020 im 22:06

2 Antworten

Beste Antwort
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 Denken Sie daran, dass ich Anfänger bin und nicht weiß, ob es hier größere Fehler gibt :)

1
Andreea 3 Sept. 2020 im 01:00

Der Breiten- und Längengrad wird im Firestore als Strings anstatt als Double gespeichert.

// 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']),
    );

Um das zu erreichen, was Sie versuchen, ist es besser, die Klasse GeoPoint aus dem Firestore-Paket zu verwenden.

1
ByteMe 1 Sept. 2020 im 19:16