firebase - 如何在来自 Firebase 的谷歌地图中显示标记?
问题描述
我试图让标记出现在谷歌地图颤振插件上,但我不知道我做错了什么。
我没有收到错误,不是我能看到的。
我正在使用谷歌地图颤振插件和云火库,这就是我在云火库中获取数据的方式:
这是代码:
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,
),
));
}
}
希望有人能告诉我我错过了什么。
解决方案
您没有调用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,
),
));
}
}
推荐阅读
- kubernetes - HPA 无法从 Kubernetes 中的 Prometheus 获取指标
- spring - 如何在 spring boot 2.0.6 中访问 spring-boot-starter-velocity
- javascript - 使用 if/else 语句根据滑块值取值
- arrays - 如何快速冻结数组?
- javascript - NetSuite:从在线表单调用 RESTlet 时出现跨域问题
- c# - 最终构建项目中的 Unity 2D sprite 渲染问题
- javascript - 如何在同一事件中调用打字稿箭头函数和 javascript 函数
- postgresql - Postgres破坏继承?
- android - 材质按钮导致渲染错误 (IllegalArgumentException)
- xml - 在 Powershell 中解析 atom 文件