Part 1 中我们准备了底图,Part 2 中我们获取了位置,现在终于开张了,“您有新的 ‘ 饿了乎 ’ 订单到了!” 我们给外卖小哥规划下路线吧!

1 Routing Service

首先,HERE Map API 中提供了一个叫做 Platform 的类,实例化Platform后,我就可以借以访问 HERE Routing Service。 有关 Routing API 的帮助文档,点这里

1
2
3
4
5
6
var platform = new H.service.Platform({
app_id: '[YOUR APP ID HERE]',
app_code: '[YOUR APP CODE HERE]'
});

var router = platform.getRoutingService();

2 Request Route

在发请求之前,需要先至少定义起点和终点,或者必要的时候增加途经点,这些点是通过 WayPointParameterType 对象传递。

为了让代码更简洁易维护,我们在 scripts 目录下创建一个 route.js文件,取代开始直接在 app.js中直接调用 Routing Service 的繁琐。如下,在 route.js 中增加一个用于封装 底图、platform对象、路径规划参数的 HERERoute函数,这个函数也会在浏览器控制台返回简单的错误日志。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// build a function to take the map and platform objects as parameters
function HERERoute (map, platform, routeOptions) {
// access the routing service by calling getRoutingService()
var router = platform.getRoutingService();
// error handling
var onSuccess = function(result) {
console.log('Route found!', result);
};
var onError = function(error) {
console.error('Oh no! There was some communication error!', error);
}

router.calculateRoute(routeOptions, onSuccess, onError);
}

3 Drawing the Route

现在我们可以在控制台看到 response,如何将 route 绘制到地图上呢

在成功返回结果的函数中增加如下代码,其中 Option_2 的部分用于实现向地图绘制路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var onSuccess = function (result) {

// Option_1 Simply put the response to the console log
console.log('Route found!', result);

// Option_2 Furtherly draw the response to the map
var route,
routeShape,
startPoint,
endPoint,
lineString;

if (result.response.route) {

// Just take the first Route in the array
route = result.response.route[0];
routeShape = route.shape;

// H.geo.LineString is recommended, instead of H.geo.Strip in the offical demo code
lineString = new H.geo.LineString();
routeShape.forEach(function (point) {
var parts = point.split(',');
lineString.pushLatLngAlt(parts[0], parts[1]);
});

// Utilize H.map.Polyline to draw a blue line
var routeLine = new H.map.Polyline(lineString, {
style: {
strokeColor: 'blue',
lineWidth: 10
}
});
map.addObject(routeLine);

// update the map bounds to that of our route
map.setViewBounds(routeLine.getBounds());
}
};

备注

  • 原文写得早一些,示例代码中 H.geo.Strip类已经从 HERE Maps JS API v3.0.15.0 及之后弃用了,需要使用 H.geo.LineString 类来替换。详情点 这里
  • 如上代码是我修改后的版本。

4 More

到 Steps 3 路径规划的功能基本实现了,Step 4 再增加一个获取当前位置作为起点,并将指定位置作为终点的功能吧。

例如,外卖小哥要给颐和园逛公园的小朋友送去冰凉可口的冰激凌……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// a small helper which converts a location into a waypoint
function locationToWaypointString(coordinates) {
return 'geo!' + coordinates.lat + ',' + coordinates.lng;
}

// set a flag called RouteRendered
// to ensure that the route is only rendered the first time
var routeRendered = false;

function updatePosition(event) {
var coordinates = {
lat: event.coords.latitude,
lng: event.coords.longitude
};

var marker = new H.map.Marker(coordinates);
map.addObject(marker);

// If the route has not been rendered yet,
// calculate and render it
if (!routeRendered) {
var route = new HERERoute(map, platform, {
mode: 'fastest;car',
representation: 'display',
waypoint0: locationToWaypointString(coordinates),
waypoint1: locationToWaypointString(EndCoordinates)
});
routeRendered = true;
}
}

// request the user's current location
navigator.geolocation.watchPosition(updatePosition);

结果大概是这样:

由于相关法律的限制,HERE Developer 网站中提供免费试用的中国境内的 HERE 在线地图是非常粗略的等级(Entry Level),如下代码仅为了展示功能,并不为了较真位置的精确程度。

当然,精密级别的 China HERE Map 也已经上线了 ,并且有 China Spec HLS API 可供使用,只是没有默认包含在Global Freemium licenses 之中。如果需要试用评估或购买,需要通过 商务途径;也可以留言我,我也愿意帮助联系。

original resource Part3: Basic Routing

complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream