使用google_maps_flutter包在Flutter中绘制路线

时间:2019-09-20 17:09:38

标签: flutter google-maps-flutter

我有一张已经用google_maps_flutter绘制的地图,上面有2个标记。我想在他们之间划一条路线。有人可以帮我吗?

当我使用@CopsOnRoad所建议的照片时,将显示图片。我希望路线为蓝线,这是前进的最佳途径。

Figure that demonstrates the problem

2 个答案:

答案 0 :(得分:1)

由于您尚未共享任何代码,因此我将以here

为例

将其添加到您的StatefulWidget子类中。

Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;

void _add() {
  final String polylineIdVal = 'polyline_id_$_polylineIdCounter';
  _polylineIdCounter++;
  final PolylineId polylineId = PolylineId(polylineIdVal);

  final Polyline polyline = Polyline(
    polylineId: polylineId,
    consumeTapEvents: true,
    color: Colors.red,
    width: 5,
    points: _createPoints(),
  );

  setState(() {
    _mapPolylines[polylineId] = polyline;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Maps"),
      actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
    ),
    body: GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 4.0),
      polylines: Set<Polyline>.of(_mapPolylines.values),
    ),
  );
}

List<LatLng> _createPoints() {
  final List<LatLng> points = <LatLng>[];
  points.add(LatLng(1.875249, 0.845140));
  points.add(LatLng(4.851221, 1.715736));
  points.add(LatLng(8.196142, 2.094979));
  points.add(LatLng(12.196142, 3.094979));
  points.add(LatLng(16.196142, 4.094979));
  points.add(LatLng(20.196142, 5.094979));
  return points;
}

答案 1 :(得分:0)

根据需要设置一条路线是很必要的,因为必须要有多个点和有效的街道,这对您而言非常重要。我建议您为诸如Google Direction这样的现有服务付费。您可以使用Google方向获取坐标和街道名称。

API(Google指导)

https://maps.googleapis.com/maps/api/directions/json?origin=LAT,LON&destination=LAT,LON&key=API_KEY

示例绘制路线(谷歌方向)

https://github.com/DeveloperLibs/flutter_google_map_route/blob/master/lib/map_screen.dart