在谷歌地图上绘制路线-Flutter

Question

我不知道如何通过自定义的纬度和经度来绘制路线。

我已经习惯了以下软件包：

google_maps_flutter: ^2.0.1
flutter_polyline_points: ^0.2.6

我使用API获取路线，这将用于在谷歌地图上创建实际路线，看起来如下：

{
"geoPoints": [
{
"latitude": <some_value>,
"longitude": <some_value>
}.
{
"latitude": <some_value>,
"longitude": <some_value>
}.
{
"latitude": <some_value>,
"longitude": <some_value>
}.
],
}

我的dart文件有以下几行代码：

onMapCreated((调用下面的setPolines((

void onMapCreated(GoogleMapController controller, LatLng origin, LatLng dest,) {
_controller  =controller;
setPolylines(origin, dest);
}

设置缺少某些内容的PolyLines((。我不知道如何传递从API获取的多段线数据

setPolylines(LatLng origin, LatLng dest) async {
polylinePoints = PolylinePoints();
PolylineResult result = await
polylinePoints.getRouteBetweenCoordinates(
'apiKey',
PointLatLng(origin.latitude, origin.longitude), 
PointLatLng(dest.latitude, dest.longitude),);
if(result.points.isNotEmpty){
// loop through all PointLatLng points and convert them
// to a list of LatLng, required by the Polyline
result.points.forEach((PointLatLng point){
routeCoordinates.add(
LatLng(point.latitude, point.longitude));
});
}
PolylineId id = PolylineId('poly');
Polyline polyline = Polyline(
polylineId: id,
color: Colors.red,
points: routeCoordinates,
width: 3,
);

polylines[id] = polyline;
}

最后是GoogleMap((，我认为折线属性应该传递路线详细信息，因为谷歌地图是FutureBuider((的子级

FutureBuilder(
future: getTripPoints(widget.accessToken, widget.tripId),
builder: (_, snapshot) {
var arraySize = snapshot.data["geoPoints"].length;
var initialLat = snapshot.data["geoPoints"][0]["latitude"];
var initialLong = snapshot.data["geoPoints"][0]["longitude"];
LatLng origin = LatLng(initialLat, initialLong);
var finalLat = snapshot.data["geoPoints"][arraySize - 1]["latitude"];
var finalLong = snapshot.data["geoPoints"][arraySize - 1]["longitude"];
LatLng dest = LatLng(finalLat, finalLong);
// routeCoordinates = snapshot.data["geoPoints"];
print(origin);
print(dest);
return GoogleMap(
markers: _markers,
zoomGesturesEnabled: true,
// zoomControlsEnabled: false,
polylines: Set<Polyline>.of(polylines.values),
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: origin,
zoom: 14,
),
onMapCreated: (controller) => onMapCreated(controller, origin, dest,),
);
},
),

有人能带我到这儿来吗？

Answer 1

似乎缺少setPolyLines()中的setState方法。使用setState触发重建，以便更新后的值反映在UI中。

setState(() {
PolylineId id = PolylineId('poly');
Polyline polyline = Polyline(
polylineId: id,
color: Colors.red,
points: routeCoordinates,
width: 3,
);

polylines[id] = polyline;
});