HERE MAP API - Part4 Advanced Routing - 1 - kikita&Maps|kikitamap.com

在 Part 3 中我们了解到如何调用 HERE Routing API 实现两点间路径规划，以及如何从当前位置出发规划路径。

这个部分继续来看看，如何展示多条路线及其信息，并允许用户交互选择。

Pre-session: 重构代码

这一部分不是改进功能，而是整理思绪。磨刀不误砍柴工，放之四海而皆准。

冰淇凌小网页的功能不断增多，代码也随之膨胀，我们要时不时地整理收纳一下，避免自己在找乐子的路上备受打击。

在 Scripts 文件夹中，新建：

map.js 用于存放和底图及绘制路线相关的逻辑；
utils.js 用于存放辅助功能，例如，将 latlog 坐标转化成 WayPointString 以供 Routing Service 使用。

代码与Part 3 类似，但是因为做了重构，需要注意其中的调用关系及 html页面中的加载顺序。

complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream

Multiple Routes

在日常导航出行时，多给出几条路线供用户选择，也是一个极常见的需求。

使用 HERE Routing API 计算路线时，可在请求中加入参数 alternatives 来获得多个推荐路线。

alternatives: 2；即，1 (primary) + 2 (alternatives) = 3 条路线。

HEREMap.prototype.drawRoute = function (fromCoordinates, toCoordinates) {
    var routeOptions = {
        mode: 'fastest;car',
        representation: 'display',
        # add parameter
        alternatives: 2,
        waypoint0: Utils.locationToWaypointString(fromCoordinates),
        waypoint1: Utils.locationToWaypointString(toCoordinates)
    };
    this.routes = new HERERoute(this.map, this.platform, routeOptions);
};

由于产生了多条道路，绘制道路的过程就要被执行多次，那么我们就把 drawRoute 函数挪到 route.js 中的 HERERoute 对象中，以供每次绘制道路调用。

// Add drawRoute Function to HERERoute
    var drawRoute = function (route) {
        var routeShape = route.shape;
        var LineString = new H.geo.LineString();

        routeShape.forEach(function (point) {
            var parts = point.split(',');
            LineString.pushLatLngAlt(parts[0], parts[1]);
        });
        var routeLine = new H.map.Polyline(LineString, {
            style: {
                strokeColor: 'blue',
                lineWidth: 3
            }
        });
        map.addObject(routeLine);
        // map.setViewBounds(routeLine.getBounds());
    };

与此同时，做 onSuccess函数的对应修改，在返回结果中依次调用 drawRoute。

var onSuccess = function (result) {
       // Simplify on success function
       if (result.response.route) {
           var routes = result.response.route;
           Setting view bounds
           routes.forEach(drawRoute);
       }
   };

Bingo！

View Bounds

基本功能已实现，为了更好的体验，我们继续加工加工。

在 Part 3 中的我们通过 setViewBounds 将地图显示为路线的范围，在Part 4 中显然就不适用了，因为这样只会返回跳转到最后一条路线的范围。将所有的路线加入到一个组中，然后跳转组的范围，来解决这个问题。

对 onSuccess 进行修改：

var onSuccess = function (result) {
    if (result.response.route) {
        var routes = result.response.route;
        // Setting view bounds
        // routes.forEach(drawRoute);
        // add all routes to a group
        var routeLines = routes.map(drawRoute);
        var routeLineGroup = new H.map.Group({
            objects: routeLines
        });
        map.addObject(routeLineGroup);
        map.setViewBounds(routeLineGroup.getBounds());
    }
};

同时移除 drawRoute 中原先的 setViewBounds语句，并向 H.map.Group 容器中增加返回的route。

// Setting view bounds using Group bounds not the last route
// map.addObject(routeLine);
// map.setViewBounds(routeLine.getBounds());
return routeLine;

original resource Part4: Advanced Routing

complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

HERE MAP API - Part4 Advanced Routing - 1

Pre-session: 重构代码

Multiple Routes

View Bounds

特色标签

链友