又是很久没来更新，以至于kikitamap.com这个域名因为没有续费而已经停用接近两周；要不是今晚忽然想写点什么，还不知道什么时候我才能发现。

工作结束了，宝贝睡下了，每到接近12点，似乎属于我自己的完整时间才开始展开。所以，我的母亲总是不解，为什么终于到了你的休息时间，反而又要”熬夜“ ？事情不能明天做吗？ 我总是无言以对，我这种矫情的时间独占需求，估计她不会理解，只好安抚她说马上就睡。大概，也不是所有人都有与自己独处的强需求。

我喜欢拍照，拍各种自认为有趣的东西，因此手机空间经常告急，只好翻一翻，删除一些不喜欢的或是没有什么内容的。忽然发现了这张很久前拍的。

当时的场景是我在等人，刚好从站的位置，看到自己的影子叠在橱窗里的模特身上，感觉很有点意思，就顺手拍了下来。世间熙熙攘攘，我们大多数都是追寻成为模特壳子的样子；住在壳子里面的人的样子呢？ta们是同一个吗？

烟台，2020.01.06

大雪之后，银装素裹，2020这一年的冬天格外寂静，雪地上没有脚印

在设备开启WiFi之后，会对周边 WiFi Access Point (AP)进行扫描，并将这些可见WiFi名称推给用户供选择。这是几乎是我们的PC和手机的日常。 除了连接WiFi登录Internet 之外，实际上，我们还可以通过 WiFi AP进行定位。

定位和地图一直是紧密联系的，无论是面向消费者的第一人称应用，还是关于管理者的追踪需求。各大LBS厂商，早就提供了各种定位功能，尤其HERE，Positioning 历史可以追溯到 Nokia年代，包括基于 GPS，WiFi network，Cell Signal，Bluetooth 等各种信号源的定位能力。

Concept

• 除了Mobile Hotspot、WiFi Egg，大多数情况下 AP不会经常的移动， 这就为WiFi定位的基础参照位置信息；

• 理论上，每一个 AP 都有全球唯一标识符— mac地址；当然也不排除有重复mac的问题，至于如何去重和更新后端数据库就是 another story，这里不展开了；

• 设备WiFi扫描到AP即可同时获取AP的信息，信号的强度，mac地址（BSSID）等，无论是否连接上；

• 根据WiFi信号强度衰减和距离的函数，可以判断设备离AP的距离；如果多个AP存在，那么这多个圆相交的区域就可以判定设备的位置；

从上面的原理可以看出，AP的位置越准确，设备扫描到的AP越多，那么设备的位置越准确。

Quick Testing

做个小测试，帮助快速理解。

假设已经拥有了 HERE Developer 账号和密钥，如果没有，这里 免费注册。

在上一篇中，尝试给出三条备选路线方案，只是看看是不够的，还需要做些交互式的操作支持。

1 Visual Tweaks

首先，这里我们做点小小的视觉调整，让路线和位置更漂亮一点。例如：

给路线的加上半透明效果，在drawRoute()中增加：

1
2
3

var routeLine = new H.map.Polyline(strip, {
  style: { strokeColor: 'rgba(0, 85, 170, 0.5)', lineWidth: 3 }
})

再给配送的起点、终点，快递员的当前位置赋予不同的显示符号，在map.js中修改addMarker()：

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
39

HEREMap.prototype.addMarker = function (coordinates, icon) {
  // Add an markerOptions object
  var markerOptions = {}
  // three different icons for origin, destination and the user's current position
  var icons = {
    iceCream: {
      url: './images/marker-gelato.svg',
      options: {
        size: new H.math.Size(26, 34),
        anchor: new H.math.Point(14, 34)
      }
    },
    origin: {
      url: './images/origin.png',
      options: {
        size: new H.math.Size(32, 32),
        anchor: new H.math.Point(12, 36)
      }
    },
    destination: {
      url: './images/destination.png',
      options: {
        size: new H.math.Size(32, 32),
        anchor: new H.math.Point(12, 36)
      }
    }
  }

  if (icons[icon]) {
    markerOptions = {
      icon: new H.map.Icon(icons[icon].url, icons[icon].options)
    }
  }

  var marker = new H.map.Marker(coordinates, markerOptions)
  this.map.addObject(marker)

  return marker
}

2 Route Selection

在显示的三条路线中，允许用户选择一条作为最佳选项，那么我们需要在onSuccess()中增加一个回调函数来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var onSuccess = function (result) {
  if (result.response.route) {
    var routeLineGroup = new H.map.Group()

    var routes = result.response.route.map(function (route) {
      var routeLine = drawRoute(route)
      routeLineGroup.addObject(routeLine)

      return {
        route: route,
        routeLine: routeLine
      }
    })

    map.addObject(routeLineGroup)
    map.setViewBounds(routeLineGroup.getBounds())

    onRouteSelection(routes[0])
  }
}

在 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