如何打印几个标记google map api 0.5.7 Flutter
Posted
技术标签:
【中文标题】如何打印几个标记google map api 0.5.7 Flutter【英文标题】:How to print several markers google map api 0.5.7 Flutter 【发布时间】:2019-09-12 00:55:32 【问题描述】:我正在尝试使用 google map api 最新版本(0.5.7),但在我的地图上只打印了一个标记,但数据库上有很多标记,在我尝试放置最后一个之前它运行良好版本。有人知道如何打印许多标记吗?我在使用标记的地方放了箭头。
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:geoflutterfire/geoflutterfire.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:rxdart/rxdart.dart';
import 'dart:async';
import 'package:intl/intl.dart';
import 'customs_icons_icons.dart';
import 'Dialogs.dart';
import 'Metro.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: FireMap(),
));
class FireMap extends StatefulWidget
State createState() => FireMapState();
class FireMapState extends State<FireMap>
GoogleMapController mapController;
Location location = new Location();
Dialogs dialogs = new Dialogs();
Firestore firestore = Firestore.instance;
Geoflutterfire geo = Geoflutterfire();
BehaviorSubject<double> radius = BehaviorSubject(seedValue: 100.0);
Stream<dynamic> query;
StreamSubscription subscription;`enter code here`
Map<MarkerId, Marker> markers = <MarkerId, Marker>;
MarkerId selectedMarker;
int _markerIdCounter = 1;
build(context)
return Stack(children: [
GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(45.758077, 4.833316), zoom: 15),
onMapCreated: _onMapCreated,
myLocationEnabled: true,
mapType: MapType.normal,
compassEnabled: true,
markers: Set<Marker>.of(markers.values),<---
),
Positioned(
bottom: 20,
right: 20,
child: Container(
height: 80.0,
width: 80.0,
child: FittedBox(
child: FloatingActionButton(
child: Icon(CustomsIcons.ticket, color: Colors.black),
backgroundColor: Colors.pink[200],
onPressed: () => dialogs.information(
context, 'Confirmer ?', 'description', addGeoPoint),
),
),
),
),
]);
_onMapCreated(GoogleMapController controller)
_startQuery();
setState(
()
mapController = controller;
,
);
void _updateMarkers(List<DocumentSnapshot> documentList) <---
final String markerIdVal = 'marker_id_$_markerIdCounter';
_markerIdCounter++;
final MarkerId markerId = MarkerId(markerIdVal);
print(documentList);
markers.clear();
documentList.forEach(
(DocumentSnapshot document)
GeoPoint pos = document.data['position']['geopoint'];
var marker = Marker(
markerId: markerId,
position: LatLng(pos.latitude, pos.longitude),
icon: BitmapDescriptor.fromAsset('assets/ticket_point.png'),
infoWindow:
InfoWindow(title: 'Ici à :', snippet: document.data['time']));
setState(()
markers[markerId] = marker;
);
,
);
【问题讨论】:
【参考方案1】:有效!我刚刚在“(DocumentSnapshot 文档)”中移动了markerIDcounter,所有的标记都出现了
【讨论】:
【参考方案2】:我就是这么干的
class _MapActivityState extends State<MapActivity>
GoogleMapController _controller;
static LatLng _center = LatLng(0.0, 0.0);
Position currentLocation;
Set<Marker> _markers = ;
void _onMapCreated(GoogleMapController controller)
setState(()
_controller = controller;
);
@override
void initState()
super.initState();
setState(()
getUserLocation();
);
@override
Widget build(BuildContext context)
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text("Home"),
),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(target: _center, zoom: 15),
markers: _markers,
),
],
),
);
getUserLocation() async
currentLocation = await locateUser();
setState(()
for (int i = 0; i < myresponse.data.length; i++)
_markers.add(Marker(
markerId: MarkerId(myresponse[i].userId),
position: LatLng(double.parse(myresponse[i].latitude),
double.parse(myresponse[i].longitude)),
icon: myresponse[i].capacity.contains("7.2")
? BitmapDescriptor.fromAsset(
'assets/charger_location.png',
)
: BitmapDescriptor.fromAsset(
'assets/marker_green.png',
),
infoWindow: InfoWindow(
title: myresponse[i].stationName,
snippet: myresponse[i].contactPerson,
onTap: () => _onTap(myresponse[i]))));
);
【讨论】:
以上是关于如何打印几个标记google map api 0.5.7 Flutter的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps JavaScript API 地理位置标记
如何处理 Google Map Direction API 中的 0,0 标记错误?
Google Maps API v3:如何动态更改标记图标?