Как отобразить маркеры в Google Maps из Firebase во flutter?

#firebase #google-maps #flutter #google-maps-markers

#firebase #google-карты #flutter #google-карты-маркеры

Вопрос:

Я пытаюсь отобразить маркеры в плагине flutter Google Maps, но я не знаю, что я делаю не так.

Я не получаю ошибку, ни одну, которую я могу видеть.

Я использую плагин Google Maps flutter и облачный firestore, вот как у меня есть данные в облачном firestore:

введите описание изображения здесь

Вот код:

 import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

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

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

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

  crearmarcadores(){
    _database.collection('Lugares')
              .where('tipo', isEqualTo: 'café')
              .where('tipo', isEqualTo: 'negocio')
              .where('tipo', isEqualTo: 'parque')
              .where('tipo', isEqualTo: 'peluqueria')
              .where('tipo', isEqualTo: 'plaza')
              .where('tipo', isEqualTo: 'restaurant')
              .where('tipo', isEqualTo: 'tienda')
              .getDocuments().then((docs) {
                if(docs.documents.isNotEmpty){
                  for(int i= 0; i < docs.documents.length; i  ) {
                    initMarker(docs.documents[i].data, docs.documents[i].documentID);
                  }
                }
              });
  }
  void initMarker(lugar, lugaresid) {
    var markerIdVal = lugaresid;
    final MarkerId markerId = MarkerId(markerIdVal);

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

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

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true,
         markers: Set<Marker>.of(markers.values),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _currentLocation,
        label: Text('Ir a mi Ubicacion!'),
        icon: Icon(Icons.location_on),
      ),
    );
  }



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

}
  

Надеюсь, кто-нибудь может сказать мне, чего мне не хватает.

Ответ №1:

вы не вызываете имя функции crearmarcadores() , что может быть первой проблемой.

может быть, вы можете вызвать initState метод, подобный следующему коду:

 import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

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

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

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

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

  crearmarcadores(){
    _database.collection('Lugares')
        .where('tipo', isEqualTo: 'café')
        .where('tipo', isEqualTo: 'negocio')
        .where('tipo', isEqualTo: 'parque')
        .where('tipo', isEqualTo: 'peluqueria')
        .where('tipo', isEqualTo: 'plaza')
        .where('tipo', isEqualTo: 'restaurant')
        .where('tipo', isEqualTo: 'tienda')
        .getDocuments().then((docs) {
      if(docs.documents.isNotEmpty){
        for(int i= 0; i < docs.documents.length; i  ) {
          initMarker(docs.documents[i].data, docs.documents[i].documentID);
        }
      }
    });
  }
  void initMarker(lugar, lugaresid) {
    var markerIdVal = lugaresid;
    final MarkerId markerId = MarkerId(markerIdVal);

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

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


  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true,
        markers: Set<Marker>.of(markers.values),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _currentLocation,
        label: Text('Ir a mi Ubicacion!'),
        icon: Icon(Icons.location_on),
      ),
    );
  }



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

}
  

Ответ №2:

Попробуйте удалить предложения where в вашем запросе Firestone. Похоже, вы пытаетесь применить их как логику OR, но предложения chained where действуют как AND . Это приведет к тому, что список данных будет пустым, а ваши маркеры не будут отображаться.