使用"当前位置"在Flutter上绘制到目标的多边形线



我有一个带有谷歌地图的应用程序,该应用程序获取我的当前位置,地图上有两个标记,标记的一点和多段线是从上一个屏幕传递的坐标。我希望多边形线的起点是我的当前位置。我还想使用我的当前位置作为第一个标记。如果多段线和标记会随着驾驶员的移动而改变位置,那就太好了。但现在这不是优先事项。

到目前为止我所做的:我可以得到我现在的位置。我能够从源位置到目的地位置的硬编码坐标绘制多段线(目的地位置是使用硬编码Cordine提供的(

我想做的:使用我的当前位置作为多段线的起点使用我的目前位置,在用户移动时更新多段线和标记。

这是我目前掌握的代码。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_mao/constants.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:geolocator/geolocator.dart';

class OrderTrackingPage extends StatefulWidget {
const OrderTrackingPage({Key? key}) : super(key: key);
@override
State<OrderTrackingPage> createState() => OrderTrackingPageState();
}
class OrderTrackingPageState extends State<OrderTrackingPage> {
final Completer<GoogleMapController> _controller = Completer();
static const snackBar = SnackBar(
content: Text(
"Problem Ahead Please Change Route, if you cannot change route then please proceed with carefull"),
);
static const LatLng sourceLocation =
LatLng(-5.163422787901919, 119.4524314848277);
static const LatLng problem1 = LatLng(-5.159517091944005, 119.44694331116966);
static const LatLng problem2 = LatLng(-5.167239534487095, 119.40174159126605);
static const LatLng destination =
LatLng(-5.1670891353015715, 119.42620389739191);
double distanceSourceFinish = Geolocator.distanceBetween(
sourceLocation.latitude,
sourceLocation.longitude,
destination.latitude,
destination.longitude);
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
LocationData? currentLocation;
late LocationData newLoc;
getCurrentLocation() async {
Location location = Location();
location.getLocation().then(
(location) {
currentLocation = location;
},
);
location.onLocationChanged.listen((newLoc) {
currentLocation = newLoc;
double distanceInMeters = Geolocator.distanceBetween(newLoc.latitude!,
newLoc.longitude!, problem1.latitude, problem1.longitude);
print(newLoc);
print("distance : " + distanceInMeters.toInt().toString() + " m");
print("longitude : " + newLoc.longitude.toString());
print("latitude : " + newLoc.latitude.toString());
if (distanceInMeters.toInt() <= 200) {
print(
"Problem Ahead Please Change Route, if you cannot change route then please proceed with carefull");
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
setState(() {});
});
}
addPolyLine(List<LatLng> polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
color: Colors.deepPurpleAccent,
points: polylineCoordinates,
width: 8,
);
polylines[id] = polyline;
setState(() {});
}
getPolyline() async {
PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
google_api_key,
PointLatLng(currentLocation!.latitude!, currentLocation!.longitude!),
PointLatLng(destination.latitude, destination.longitude),
travelMode: TravelMode.driving,
);
print("result" + result.toString());
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print(result.errorMessage);
}

addPolyLine(polylineCoordinates);
setState(() {});
}
@override
void initState() {
getCurrentLocation();
getPolyline();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 155, 31, 14),
title: const Text(
"Route Maps",
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
body: currentLocation == null
? Center(
child: Text(
"Loading",
style: const TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.w800,
),
))
: Stack(
alignment: Alignment.center,
children: [
GoogleMap(
mapType: MapType.satellite,
initialCameraPosition: CameraPosition(
target: LatLng(currentLocation!.latitude!,
currentLocation!.longitude!),
zoom: 16),
polylines: {
Polyline(
polylineId: PolylineId("route"),
points: polylineCoordinates,
color: Color.fromARGB(255, 255, 222, 35),
width: 6)
},
markers: {
Marker(
markerId: const MarkerId("currentLocation"),
position: LatLng(currentLocation!.latitude!,
currentLocation!.longitude!),
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueYellow)),
Marker(
markerId: MarkerId("source"),
position: sourceLocation,
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueAzure)),
Marker(
markerId: MarkerId("Problem"),
position: problem1,
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueRed)),
Marker(
markerId: MarkerId("destination"),
position: destination,
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueCyan)),
},
onMapCreated: (mapController) {
_controller.complete(mapController);
},
),
Positioned(
top: 20.0,
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 6.0,
horizontal: 12.0,
),
decoration: BoxDecoration(
color: Colors.yellowAccent,
borderRadius: BorderRadius.circular(20.0),
boxShadow: const [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 2),
blurRadius: 6.0,
)
],
),
child: Text(
"Distance : " +
//distanceCurrentProblem.toInt().toString() +
distanceSourceFinish.toInt().toString() +
" m",
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
);
}
}

我使用geoLocator Pkg,它在移动更新的标记和多段线时解决了我的问题。

Geolocator.getPositionStream(locationSettings: locationSettings)
.listen((event) async {

source.value = event;
await getPointes();

});

事件是我向前和向后移动时的当前更新位置

相关内容

最新更新