来自Firebase LatLng的谷歌地图标记未显示在地图上

Question

我试图在谷歌地图上添加一些来自firebase的标记，但不明白为什么这些标记没有出现在谷歌地图(UI(上。有人能帮我或建议我更新教程吗？

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

Answer 1

纬度和经度在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类。

Answer 2

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,
@required this.documents,
}) : 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请记住，我是初学者，我不知道这里是否有重大错误：(