flutter - 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,
),
),
],
),
);
}
}
解决方案
推荐阅读
- pentaho - pentaho PDI passing uservariable in command line
- typo3 - 如何检查当前用户是否对 TYPO3 中的特定字段具有写入权限
- javascript - CORS preflight request not handled by external API
- javacard - How to change java card default key with my own keys?
- c - 八进制转十六进制的C程序
- docker - Docker - 我是否也应该为 --cache-from 保存基本映像?
- python - How to remove this controller error from Odoo v10
- msdeploy - MsDeploy 无法在 bin 目录中创建文件夹 - 根据日志,将其视为文件
- c# - The data area passed to a system call is too small when saving with C# EF6
- apache - Apache RewriteRule 不适用于正斜杠