在 google 地图中使用折线绘制两点之间的路线问题

issue in Draw route between two point using polyline in google map

我使用 SupportMapFragment 来显示 google 地图。我在两个位置之间使用 Direction API 两条路线。我使用 GSON 库解析 return 形成方向 API 的 JSON 数据,并提取显示每条路线的步骤标签。然后我用折线画它。但我的路线在路上不匹配,大部分是直线。

这段代码是我提取的JSON方向google return:

GoogleDirectionResponse data = (GoogleDirectionResponse) response;
    if (data.getStatus().matches("OK")){
        List<LatLng> steps = new ArrayList<>();
        RoutesData routesData = data.getRoutes().get(0);
        LegData legData = routesData.getLegs().get(0);
        for (StepsData item : legData.getSteps()){
            LatLng start = new LatLng(item.getStart_location().getLat(), item.getStart_location().getLng());
            LatLng end = new LatLng(item.getEnd_location().getLat(), item.getEnd_location().getLng());
            steps.add(start);
            steps.add(end);
        }
        onDirectionFetchedListener.onDirectionFetched(steps);
    }

我将 LatLng 数据保存在数组中并将其传递给片段以进行绘制:

@Override
public void onDirectionFetched(List<LatLng> steps) {
    PolylineOptions rectLine = new PolylineOptions().width(3).color(
            Color.RED);
    for (LatLng item : steps) {
        rectLine.add(item);
    }

    Polyline polylin = map.addPolyline(rectLine);
}

这是我的地图:

看看红线。那不是继续上路。如何解决这个问题。谢谢

根据the documentation

Each element in the legs array specifies a single leg of the journey from the origin to the destination in the calculated route. For routes that contain no waypoints, the route will consist of a single "leg," but for routes that define one or more waypoints, the route will consist of one or more legs, corresponding to the specific legs of the journey.

因此,使用 legs 数组无法很好地表示路线。

要更好地表示路线,您可以使用字段 overview_polyline。来自 the documentation:

overview_polyline contains a single points object that holds an encoded polyline representation of the route. This polyline is an approximate (smoothed) path of the resulting directions.

要解码此 overview_polyline,您可以使用 Google Maps Android API Utility Library 中的 PolyUtil.decode 方法。

步骤为路线说明。您必须解析 overview_polyline 对象并获取编码的折线字符串。然后使用 android-maps-utils 库解码字符串:

List<LatLng> decodedPoints = PolyUtil.decode(polylineString);
PolylineOptions options = new PolylineOptions();
options.width(3);
options.color(Color.RED);
options.addAll(decodedPoints);

map.addPolyline(options);

Xamarin 版本:

    List<LatLng> coordsList = new List<LatLng>();
    foreach (var step in leg.steps)
    {
        var points = PolyUtil.Decode(step.polyline.points);
        foreach (var point in points)
        {
            coordsList.Add(point);
        }
    }

答案正在使用 Google 方向 API 的 json 响应的 'overview_polyline'。

我有同样的问题,需要在 Xamarin Forms 中实施,经过两天的工作终于解决了这个问题。

'overview_polyline'需要解码得到位置List。

List<Position>

然后使用位置列表绘制折线。

博客: https://www.xamboy.com/2019/05/17/exploring-map-tracking-ui-in-xamarin-forms/ GitHub : https://github.com/rdelrosario/MapTrackingSample

从 Github 下载示例项目并按照以下步骤操作:

为了解码 'overview_polyline' 使用上述项目中的 PolylineHelper.cs class 它将 return 位置 List.Use 用于绘制的位置列表叠加层中的折线。

//calling the method from helper class and pass the 'overview_polyline'
Route _route; 
var positions=(Enumerable.ToList(PolylineHelper.Decode(_route.overview_polyline.points)));
//Drawing the Polylines
foreach (var _step in positions)
{
polyline.Positions.Add(new Position(_step.Latitude, _step.Longitude));
}
//Adding the drawn polylines to the overlay of the map
polyline.StrokeColor = Color.Blue;
polyline.StrokeWidth = 5f;
map.Polylines.Add(polyline);

PS:这是 Xamarin Forms 中上述问题的实现,感谢博客作者。

编码愉快!!