使用 Polyline 通过 google_maps_flutter 插件制作自定义路线 - Flutter答案

【问题标题】：Using Polyline for making custom route with google_maps_flutter plugin - Flutter使用 Polyline 通过 google_maps_flutter 插件制作自定义路线 - Flutter
【发布时间】：2019-10-16 10:29:22
【问题描述】：

google_maps_flutter 0.5.6 在GoogleMap 上添加了对Polylines 的支持。但在我看来，没有可用的代码或文档。

存在一个名为 maps_view 的插件，它支持折线

import 'package:map_view/map_view.dart';
import 'package:map_view/polyline.dart';
...
MapView mapView = MapView();
mapView.addPolyline(Polyline('my_polyline', [
  Location(45.52309483308097, -122.67339684069155),
  Location(45.52298442915803, -122.66339991241693),
]));

我需要与google_maps_flutter 内置的相同功能。

【问题讨论】：

标签： flutter google-maps-flutter

【解决方案1】：

在你的 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;
}

【讨论】：

在这种情况下您更喜欢什么：maps_view 或 google_maps_flutter？
如何从 Firestore 中检索 GeoPoint 列表并将其添加（）到 _createPoints() 的 points 变量中