首页 > 解决方案 > Flutter 如何从 Firestore 中检索地理点并显示为谷歌地图的标记?

问题描述

对于这个程序,我可以显示谷歌地图并对地图进行操作,包括在地图上添加标记、搜索位置等。但我需要从 Firestore 中检索地理点并显示为谷歌地图的标记。我希望任何人都可以教我如何做到这一点,我将感谢您的帮助。非常感谢你们。

//this is the page to display the google map and do action for the map.
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_webservice/places.dart';
import 'Camera/camera_screen.dart';
import 'package:flutter_google_places/flutter_google_places.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:geoflutterfire/geoflutterfire.dart';
import 'package:firebase_database/firebase_database.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchName;
  GoogleMapController mapController;
  TextEditingController locationController = TextEditingController();
  LatLng _lastPosition;
  Set<Marker> _maker = {};
  Firestore _firestore = Firestore.instance;

  void onMapCreated(controller) {
    setState(() {
      mapController = controller;
    });
  }
  //located current user location
  currentUserLocation() async
  {
    Position position = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
    List<Placemark> placeMark = await Geolocator().placemarkFromCoordinates(position.latitude,position.longitude);
    setState(() {
      //move the camera to user current location
      mapController.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
        target: LatLng(position.latitude , position.longitude),
        zoom: 20.0,
      )));
      locationController.text = placeMark[0].thoroughfare;
    });

  }
  //Search the user location
  searchNavigate()
  {
    Geolocator().placemarkFromAddress(searchName).then((result){
      //move the map camera to search location
      mapController.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
          target: LatLng(result[0].position.latitude , result[0].position.longitude),
          zoom: 30.0
      )));
    });
  }
  //save the position on the target position
  _onCameraMove(CameraPosition position)
  {
    setState(() {
      _lastPosition = position.target;
    });
  }
  //add Marker
  void addMaker()
  {
    setState(() {
      _maker.add(
        Marker(
            markerId: MarkerId(_lastPosition.toString()),
            position: _lastPosition,
            infoWindow: InfoWindow(
              title: 'Remember Here',
            ),
            icon: BitmapDescriptor.defaultMarker,
            onTap: ()
            {
              Navigator.push(context, MaterialPageRoute(
                builder:(context) => CameraScreen(position: _lastPosition,),
              ));
              print(_lastPosition.latitude);

            }
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: onMapCreated,
            initialCameraPosition: (
                CameraPosition(
                  target: LatLng(3.1390 , 101.6869),
                  zoom: 15.0,
                )
            ),
            onCameraMove: _onCameraMove,
            markers: _maker,
          ),
          Positioned(
            top: 30.0,
            right: 15.0,
            left: 15.0,
            child: Container(
              height: 50.0,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.white,
              ),
              child: TextField(
                onChanged: (value) async
                {
                  Prediction p = await PlacesAutocomplete.show(
                      context: context,
                      apiKey: 'AIzaSyCzVLZ_H7p_o6fYjdxb0WWRorcliFfYPf8',
                      mode: Mode.overlay, // Mode.fullscreen
                      language: "en",
                      components: [new Component(Component.country, "mys")]);
                  setState(() {
                    value = p.description;
                    searchName = value;
                  });


                },
                decoration: InputDecoration(
                  hintText: 'Search Location',
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.only(left: 15.0,top: 15.0),
                  suffixIcon: IconButton(
                    icon: Icon(Icons.search),
                    iconSize: 30.0,
                    onPressed: searchNavigate,
                  ),
                ),
                controller: locationController,
              ),
            ),
          ),
          Positioned(
            bottom: 50.0,
            right: 15.0,
            child: FloatingActionButton(
              heroTag: 'btn2',
              backgroundColor: Colors.lightBlueAccent,
              child: Icon(
                Icons.location_searching,
                color: Colors.white,

              ),

              onPressed: currentUserLocation,
            ),
          ),
          Positioned(
            bottom: 120.0,
            right: 15.0,
            child: FloatingActionButton(
              heroTag: 'btn1',
              backgroundColor: Colors.lightBlueAccent,
              child: Icon(
                Icons.pin_drop,
                color: Colors.white,

              ),
              onPressed: addMaker,
            ),
          ),

        ],
      ),
    );
  }
}

标签: flutter

解决方案


推荐阅读