如何使用Flutter获取真实的方向指示？ （绘制真实路线） [英] how to get real direction steps using Flutter? (draw real route)

问题描述

我正在使用出租车应用程序。

我是这样使用的：

但是我需要这样：（在真实道路上绘制目标路线）

解决方案

查找从api指向json的 polylineoverview 中获取点的确切路线。

这就是我提取第二条图像所显示的确切路线的方法。

它是一个将点返回为字符串

  Future< String> getRouteCoordinates（LatLng l1，LatLng l2）async {
字符串url = 
 https://maps.googleapis.com/maps/api/directions/json?origin=${l1.latitude},$ {l1.longitude}& destination = $ {l2.latitude}，$ {l2.longitude}& key = $ {Constants.anotherApiKey}; 
 http.Response response = await http.get（url）; 
地图值= jsonDecode（response.body）; 
 ProjectLog.logIt（TAG， Predictions，values.toString（））; 
返回值[路线] [0] [总览折线] [积分]; 
} 
  

您将获得一个点的字符串与此类似

  u | umDs`gwML} A_GGgFGAWwDEm @ TcFGsAAa @ BeA\QDe @ AYISOKHKJGFw @ ^ ？ @ LEV @`DvAxFxAxGzCdN`H`ZnEnRr @ hDnB | IhDlNvKnd @ vDhPrFzUzGjYxBtH | @ hCdAzBXl @ fAhBtAtBjBhCfArAdAhAvBtBlB | AjGfFhLzJfEzDzCvDz @ pA`BpC`ApBbAzBxCrIr @ rBjNta @ X @ nBbAlBzCbI | R |【J @ hA`FBVC`ASpD 1A中[FiMpCaBVgABiAPoE〜@ cIdBiLfCcHdBsCl @ yJvBmDt @ y @ l @ {@ X_ @ P [VGJGZCd @ r @ tCf @ rBTbAV`BB` @？n @ GdA @ XHj @ bAxBl @ hBPjADf @？v @ Ej @ Ml @ Ut @ [r @] h @ sA`C {@ lAMZGl @ KjECbDGhBuGMsJKcCGw @ CqJCiECAd @ ALoBbKs @ jDM ^ x @ j @ vPfLvCnB〜DnCx @ f @ R @ RAd @ GDIbBmDv @ y @ LId @ On @ A〜EJX @ pFCB / code> 

现在，您将在这样的多段线集中添加多段线

  _polyLines.add（Polyline（
 polylineId：PolylineId（Constants.currentRoutePolylineId）），//在此处传递任何字符串
宽度：3，
测地线：true，
点：Utils.convertToLatLng（Utils.decodePoly（encodedPoly）），
 color：ConstantColors.PrimaryColor））; 
  

此处 encodedPoly 是提取的相同字符串

在上面的函数中，您必须将 points\encodedPoly 转换为latlng列表。就像我使用utils函数一样。

我使用的两个函数都是

decodePoly：

  //！DEPOL POLY 
静态列表definePoly（String poly）{
 var list = poly.codeUnits; 
 var lList = new List（）; 
 int索引= 0; 
 int len = poly.length; 
 int c = 0; 
 //重复直到所有属性都被解码为止
 do {
 var shift = 0; 
 int结果= 0; 
 
 //用于解码一个属性的值
 do {
 c = list [index]-63; 
结果| =（c& 0x1F）<< （班次* 5）; 
 index ++; 
 shift ++; 
} while（c> = 32）; 
 / *如果值是负数，则按位不是值* / 
 if（结果& 1 == 1）{
结果=〜结果; 
} 
 var result1 =（结果>> 1）* 0.00001; 
 lList.add（result1）; 
} while（index< len）; 
 
 / *加上先前的值，如编码* / 
中的（var i = 2; i< lList.length; i ++）lList [i] + = lList [i- 2]; 
 
 print（lList.toString（））; 
 
 return lList; 
} 
  

和convertToLatLng（）：

 静态列表< LatLng> convertToLatLng（List points）{
 List< LatLng>结果=< LatLng> []; 
 for（int i = 0; i< points.length; i ++）{
 if（i％2！= 0）{
 result.add（LatLng（points [i-1 ]，点[i]））； 
} 
} 
返回结果； 
} 
  

这将像我在我的应用程序中一样进行精确的路由：

以下是屏幕截图：
< img src = https://i.stack.imgur.com/nFUUb.jpg alt = ScreenShot>

I'm working with taxi app. Is it possible to draw real route on real road using flutter?

I used this way: https://developers.google.com/maps/documentation/directions/intro#ExampleRequests

  getDirectionSteps(double destinationLat, double destinationLng) {
    network
        .get("origin=" +
            location.latitude.toString() +
            "," +
            location.longitude.toString() +
            "&destination=" +
            destinationLat.toString() +
            "," +
            destinationLng.toString() +
            "&key=api_key")
        .then((dynamic res) {
      List<Steps> rr = res;
      print(res.toString());

      ccc = new List();
      for (final i in rr) {
        ccc.add(i.startLocation);
        ccc.add(i.endLocation);
      }

      mapView.onMapReady.listen((_) {
        mapView.setMarkers(getMarker(location.latitude,location.longitude,destinationLat,destinationLng));
        mapView.addPolyline(new Polyline("12", ccc, width: 15.0));
      });
      _screenListener.dismissLoader();
      showMap();
    }).catchError((Exception error) => _screenListener.dismissLoader());
  }

my output look like this:

But I need like this: (draw destination route on real road)

解决方案

to find the exact route you have to get points out of the polylineoverview from the json from directions api.

This is how I extracted the exact route just like you show in the second image.

Its is a function that return points as a string

Future<String> getRouteCoordinates(LatLng l1, LatLng l2) async {
    String url =
        "https://maps.googleapis.com/maps/api/directions/json?origin=${l1.latitude},${l1.longitude}&destination=${l2.latitude},${l2.longitude}&key=${Constants.anotherApiKey}";
    http.Response response = await http.get(url);
    Map values = jsonDecode(response.body);
    ProjectLog.logIt(TAG, "Predictions", values.toString());
    return values["routes"][0]["overview_polyline"]["points"];
  }

you will get a string of points somewhat similiar to this

 u|umDs`gwML}A_GGgFGAWwDEm@TcFGsAAa@BeA\QDe@AYISOKHKJGFw@^?jAAnAEnOA|GAhHEx@?jA@tC?XFLLf@Bf@@t@?xAA|E?dEEj_@GxMChG@tCIvl@@tAK`DQlA?zBApE?lBExNAlH@rMAtGJdDJnATfB`AnEdAzEj@~B|@lEF\xAvGnAlF~@lEv@`DvAxFxAxGzCdN`H`ZnEnRr@hDnB|IhDlNvKnd@vDhPrFzUzGjYxBtH|@hCdAzBXl@fAhBtAtBjBhCfArAdAhAvBtBlB|AjGfFhLzJfEzDzCvDz@pA`BpC`ApBbAzBxCrIr@rBjNta@x@nBbAlBzCbI|R|j@hA`FBVC`ASpD?lA[FiMpCaBVgABiAPoE~@cIdBiLfCcHdBsCl@yJvBmDt@y@l@{@X_@P[VGJGZCd@r@tCf@rBTbAV`BB`@?n@GdA@XHj@bAxBl@hBPjADf@?v@Ej@Ml@Ut@[r@]h@sA`C{@lAMZGl@KjECbDGhBuGMsJKcCGw@CqJCiECAd@ALoBbKs@jDM^x@j@vPfLvCnB~DnCx@f@R@RAd@GDIbBmDv@y@LId@On@A~EJX@pDJrADb@QFC

Now you will add the polyline in the set of polylines like this

_polyLines.add(Polyline(
        polylineId: PolylineId(Constants.currentRoutePolylineId),//pass any string here
        width: 3,
        geodesic: true,
        points: Utils.convertToLatLng(Utils.decodePoly(encodedPoly)),
        color: ConstantColors.PrimaryColor));

here encodedPoly is the same string that extracted from previous method.

In the function above you have to convert the points\encodedPoly into the list of latlng. Like i did using utils function.

Both functions that i used are

decodePoly :

// !DECODE POLY
  static List decodePoly(String poly) {
    var list = poly.codeUnits;
    var lList = new List();
    int index = 0;
    int len = poly.length;
    int c = 0;
    // repeating until all attributes are decoded
    do {
      var shift = 0;
      int result = 0;

      // for decoding value of one attribute
      do {
        c = list[index] - 63;
        result |= (c & 0x1F) << (shift * 5);
        index++;
        shift++;
      } while (c >= 32);
      /* if value is negative then bitwise not the value */
      if (result & 1 == 1) {
        result = ~result;
      }
      var result1 = (result >> 1) * 0.00001;
      lList.add(result1);
    } while (index < len);

    /*adding to previous value as done in encoding */
    for (var i = 2; i < lList.length; i++) lList[i] += lList[i - 2];

    print(lList.toString());

    return lList;
  }

and convertToLatLng() :

static List<LatLng> convertToLatLng(List points) {
    List<LatLng> result = <LatLng>[];
    for (int i = 0; i < points.length; i++) {
      if (i % 2 != 0) {
        result.add(LatLng(points[i - 1], points[i]));
      }
    }
    return result;
  }

This would make a exact route like i did in my app :

Here is the screenshot :

这篇关于如何使用Flutter获取真实的方向指示？ （绘制真实路线）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！