HERE MAP API - Part3 Basic Routing

Posted on In Disqus: Word count in article: 853 Reading time ≈ 3 mins.

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
34
// 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