【发布时间】：2022-01-10 22:48:36
【问题描述】：
这是我在这个网站上的第一篇文章，所以我希望能得到我需要的帮助。
我是 Flutter 的新手，我正在尝试使用 flutter_polyline_points 插件在用户位置和用户指定的标记之间绘制折线或路线。我在网上搜索并查看了许多教程，但我一直收到错误，或者它不适用于我的代码。
那么有人可以帮我实现这个目标吗？
提前致谢！
这些是我的代码：
const LatLng dest_location = LatLng(26.0667, 50.5577);
class _NavPageScreenState extends State<NavPage> {
Completer<GoogleMapController> _controllerGoogleMap = Completer();
late GoogleMapController newGoogleMapController;
late Position currentPosition;
var geoLocator = Geolocator();
Map<MarkerId, Marker> markers = {};
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
void locatePosition() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
currentPosition = position;
LatLng latlatposition = LatLng(position.latitude, position.longitude);
CameraPosition cameraPosition =
new CameraPosition(target: latlatposition, zoom: 16);
newGoogleMapController
.animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
}
static final CameraPosition _UserLocation = CameraPosition(
target: LatLng(26.0667, 50.5577),
zoom: 16,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps'),
backgroundColor: Colors.redAccent,
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => HomePage()));
}),
),
body: GoogleMap(
mapType: MapType.normal,
myLocationButtonEnabled: true,
initialCameraPosition: _UserLocation,
polylines: Set<Polyline>.of(polylines.values),
markers: Set<Marker>.of(markers.values),
myLocationEnabled: true,
zoomGesturesEnabled: true,
zoomControlsEnabled: true,
onMapCreated: (GoogleMapController controller) {
_controllerGoogleMap.complete(controller);
newGoogleMapController = controller;
_getPolyline();
locatePosition();
setState(() {});
},
),
);
}
_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);
}
}
【问题讨论】：
-
你能把你收到的错误信息贴在这里吗？
-
@NelsonJr。您好尼尔森，感谢您的回复！我尝试了许多不同的方法，但我得到了不同的错误，所以为了让事情变得更容易，我用你的一种方法来编辑我的代码来绘制折线，因为我看到了你对类似问题的回答，我的没有错误使用您的方法编写代码，但我无法添加标记或绘制折线。我只看到地图。我试图做的是让用户通过在地图上放置一个标记来选择任何目的地，然后导航到它，其中一条折线将被绘制到指定的位置/标记（目的地和原点不固定）
-
感谢您更新代码 @Aziz！让我检查一下
标签： flutter google-maps routes polyline direction