Flutter：折线显示直线

Posted 2023-02-23

【中文标题】Flutter：折线显示直线

【英文标题】：Flutter : polylines show straight line

【发布时间】：2020-10-31 13:39:57

【问题描述】：

我正在实现一个颤振应用程序以通过flutter google maps 插件显示折线，但它只显示这两点之间的直线而不显示实际路线，我不太确定需要做什么。

这是我的添加标记功能

void addMarker() 
latlng.add(LatLng(5.973804, 80.429838));
allMarkers.add(Marker(
  markerId: MarkerId('busLoc'),
  draggable: true,
  onTap: () 
    print('Marker Tapped');
  ,
  position: LatLng(5.973804, 80.429838),
));

_polyline.add(Polyline(
  color: Colors.blue,
  visible: true,
  points: latlng,
  polylineId: PolylineId("distance"),
));

这是我的脚手架

GoogleMap(
    
    polylines: _polyline,
    markers: Set.from(allMarkers),
    initialCameraPosition:
        CameraPosition(target: LatLng(widget.la, widget.l0), zoom: 14),
    mapType: MapType.normal,
  ),

下面我也会附上截图

【参考方案1】：

要获取从 A 点到 B 点的路线，您需要使用 google_maps_webservice flutter 包中提供的 Directions API，这是来自 Google Maps Platform 的一项服务，可提供路线信息

其中一个路线信息是overview_polyline，它包含路线的编码折线表示。

您可以通过使用google_maps_webservice 包向Directions API 发送请求的函数来获取overview_polyline，如下所示：

import 'package:google_maps_webservice/directions.dart' as directions;

final _directions = new directions.GoogleMapsDirections(apiKey: "YOUR_API_KEY");

var overviewPolylines;

directions.DirectionsResponse dResponse = await _directions.directionsWithAddress(
     _originAddress, 
     _destinationAddress, 
);

if (dResponse.isOkay) 
  for (var r in dResponse.routes) 
    overviewPolylines = r.overviewPolyline.points
  

然后，一旦您使用上面的示例代码从 Directions API 获得 overview_polyline，您将需要使用来自 google_maps_util Flutter 包的 PolyUtil(); 方法对其进行解码，如下所示：

import 'package:google_maps_util/google_maps_util.dart';

PolyUtil myPoints = PolyUtil();
var pointArray = myPoints.decode(overviewPolylines);

解码后，您可以将pointArray 传递给您的polyline 对象，如下所示：

_polyline.add(Polyline(
 color: Colors.blue,
  visible: true,
  points: pointArray,
  polylineId: PolylineId("distance"),
));

【讨论】：

太棒了！！正是我想要的，谢谢伙计..!!

【参考方案2】：

它显示直线，因为你的折线中只有两个点，所以预期的行为是从一个点到另一个点画一条线

【讨论】：

那么你能帮我看看我能做些什么来确定这两点之间的路线吗？

折线的概念是将你给它的点用线连接起来。因此，如果您想获得两点之间的路线，则必须使用其他 api，即 Direction Api，这是一个如何做的教程。跟着它走。 medium.com/flutter-community/…

【参考方案3】：

你必须使用 google direction API 这里有一篇文章解释了如何在颤振中绘制两点之间的路线。

https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe