如何解决Firebase LatLng的Google Maps标记未显示在地图上
我正在尝试从Firebase在Google地图上添加一些标记,但无法弄清楚标记为什么未显示在Google地图上(在用户界面上)。有人可以帮我还是建议我更新教程?
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,));
}
}
解决方法
纬度和经度在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
类。
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,}) : 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请记住,我是初学者,不知道这里是否有重大错误:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。