[英]Use current location to draw poly lines to a destination and also to add markers on google maps with markers flutter
我有一個帶有谷歌 map 的應用程序,該應用程序獲取我的當前位置,map 上有兩個標記,標記的一個點和折線是從前一個屏幕傳遞的坐標。 我希望折線的起點是我當前的位置。 我還想將我當前的位置用作第一個標記。 如果折線和標記會隨着司機的移動而改變 position,那就太好了。 但這不是現在的優先事項。
到目前為止我所做的:我能夠獲得我當前的位置。 我能夠從硬編碼坐標繪制折線到目標位置(目標位置由前一個屏幕提供)
我想做什么: 使用我的當前位置作為我的折線的起點 使用我的當前位置添加標記 當驅動程序移動時更新折線和標記。
這是我到目前為止的代碼。
class _MyAppState extends State<RoutePage> {
late GoogleMapController mapController;
// Starting point latitude
// 5.6609595, -0.017155699999989338)
double _originLatitude = 5.555700;
// Starting point longitude
double _originLongitude = -0.196300;
// Destination latitude
double? destLatitude;
// Destination Longitude
double? destLongitude;
// Markers to show points on the map
Map<MarkerId, Marker> markers = {};
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
Completer<GoogleMapController> _controller = Completer();
late Position currentPosition;
var geoLocator = Geolocator();
late Geolocator geolocatorTwo;
var locationOptions = LocationOptions(accuracy: LocationAccuracy.bestForNavigation, distanceFilter: 4);
Future<LatLng> getCurrentPositiion() async {
Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.bestForNavigation);
currentPosition = position;
LatLng pos = LatLng(position.latitude, position.longitude);
mapController.animateCamera((CameraUpdate.newLatLng(pos)));
print('MyPosition');
print(currentPosition);
print(pos.longitude);
print(pos.latitude);
print(position.longitude);
print(position.latitude);
print(pos);
return pos;
}
static const LatLng _center = const LatLng(45.521563, -122.677433);
@override
void initState() {
/// add origin marker origin marker
_addMarker(
LatLng(_originLatitude, _originLongitude),
"origin",
BitmapDescriptor.defaultMarker,
);
// Add destination marker
_addMarker(
LatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
"destination",
BitmapDescriptor.defaultMarkerWithHue(90),
);
_getPolyline();
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GoogleMap(
padding: EdgeInsets.only(top: 135),
myLocationButtonEnabled: true,
myLocationEnabled: true,
mapType: MapType.normal,
initialCameraPosition: googlePlex,
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
mapController=controller;
getCurrentPositiion();
},
polylines: Set<Polyline>.of(polylines.values),
markers: Set<Marker>.of(markers.values),
),
),
);
}
// This method will add markers to the map based on the LatLng position
_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId, icon: descriptor, position: position);
markers[markerId] = marker;
}
_addPolyLine(List<LatLng> polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
points: polylineCoordinates,
width: 8,
);
polylines[id] = polyline;
setState(() {});
}
void _getPolyline() async {
List<LatLng> polylineCoordinates = [];
print("In the Polyline");
print(currentPosition);
print(currentPosition.longitude);
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"APP KEY",
PointLatLng(_originLatitude, _originLongitude),
PointLatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
travelMode: TravelMode.driving,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);
}
void getLocationUpdates(){
var homeTabPositionStream = Geolocator.getPositionStream().listen((Position position) {
currentPosition = position;
LatLng pos = LatLng(position.latitude, position.longitude);
mapController.animateCamera(CameraUpdate.newLatLng(pos));
});
}
}
我錯過了什么,為什么我不能只使用currentPosition.latitude
和currentPosition.longitude
?
我試圖以這樣一種方式修改您的代碼,即它使用您當前的位置作為多段線的起點,並使用 latlng 作為原點標記。 請參閱隨附的屏幕截圖。
我的默認位置在 GooglePlex 中,我只是在它附近設置了目的地 latlng (dest_location)。 你可以把你的設置在你所在位置附近的某個地方。
此外,這篇文章可能會有所幫助,因此請查看。 :)
const LatLng dest_location = LatLng(37.42796133580664, -122.085749655962);
class _TrackingState extends State<Tracking> {
GoogleMapController mapController;
// Markers to show points on the map
Map<MarkerId, Marker> markers = {};
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
Position currentPosition;
var geoLocator = Geolocator();
var locationOptions = LocationOptions(
accuracy: LocationAccuracy.bestForNavigation, distanceFilter: 4);
void getCurrentPosition() async {
currentPosition = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.bestForNavigation);
}
@override
void initState() {
super.initState();
getCurrentPosition();
}
@override
Widget build(BuildContext context) {
CameraPosition initialCameraPosition = _kGooglePlex;
if (currentPosition != null) {
initialCameraPosition = CameraPosition(
target: LatLng(currentPosition.latitude, currentPosition.longitude),
zoom: 14.4746);
}
return MaterialApp(
home: Scaffold(
body: GoogleMap(
padding: EdgeInsets.only(top: 135),
myLocationButtonEnabled: true,
myLocationEnabled: true,
mapType: MapType.normal,
initialCameraPosition: initialCameraPosition,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
mapController = controller;
_getPolyline();
},
polylines: Set<Polyline>.of(polylines.values),
markers: Set<Marker>.of(markers.values),
),
),
);
}
// This method will add markers to the map based on the LatLng position
_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId, icon: descriptor, position: position);
markers[markerId] = marker;
}
_addPolyLine(List<LatLng> polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
points: polylineCoordinates,
width: 8,
);
polylines[id] = polyline;
setState(() {});
}
void _getPolyline() async {
/// add origin marker origin marker
_addMarker(
LatLng(currentPosition.latitude, currentPosition.longitude),
"origin",
BitmapDescriptor.defaultMarker,
);
// Add destination marker
_addMarker(
LatLng(dest_location.latitude, dest_location.longitude),
"destination",
BitmapDescriptor.defaultMarkerWithHue(90),
);
List<LatLng> polylineCoordinates = [];
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"API KEY",
PointLatLng(currentPosition.latitude, currentPosition.longitude),
PointLatLng(dest_location.latitude, dest_location.longitude),
travelMode: TravelMode.walking,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.