在 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 条路线。

1
2
3
4
5
6
7
8
9
10
11
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 对象中,以供每次绘制道路调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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

1
2
3
4
5
6
7
8
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 进行修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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。

1
2
3
4
// 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