使用 google_maps_flutter 包在 Flutter 中绘制路线答案

【问题标题】：Draw a route in Flutter with google_maps_flutter package使用 google_maps_flutter 包在 Flutter 中绘制路线
【发布时间】：2020-01-21 18:18:49
【问题描述】：

我已经用google_maps_flutter 绘制了一张地图，上面有 2 个标记。我想在它们之间画一条路线。有人可以帮帮我吗？

当我使用@CopsOnRoad 建议的那个时，我会显示图片。我希望这条路线是蓝线，这是最好的前进方式。

【问题讨论】：

标签： flutter google-maps-flutter

【解决方案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;
}

【讨论】：

谢谢。很抱歉没有提交代码，因为这个问题是通用的，而不是基于现有代码。我找到了我正在路由的这段代码，但它从一个点到另一个点绘制直线，而不是基于从一个标记到另一个标记的现有路线的路线。我说的对吗？
你的意思不是route 2 点之间的线吗？您必须在某些LatLng 上显示标记，使用相同的LatLng 您可以创建线路或路线。
我在帖子中插入了一张图片，展示了我对您的建议的看法以及我想要的内容。
好的，我知道了，但是很抱歉，目前还没有办法帮助您通过有效道路加入 2 个点，您需要做的就是创建许多 LatLng（道路纬度和经度）打印你想要的。
好的。有没有办法通过颤振或插件获得路线？不知道有没有插件可以生成这个？

【解决方案2】：

很高兴有一条你想要的路线，它必须有几个点和有效的街道，这对你来说非常重要。我建议你为现有的服务付费，比如谷歌方向。您可以通过 google 方向获取坐标和街道名称。

API（谷歌方向）

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

【讨论】：