HERE MAP API - Part2 Geolocation

在 Part 1 地图底图准备好的基础之上，我们增加一个获取浏览器当前位置并持续更新的功能，来解决“Where am I ？”的问题。

具体可以通过浏览器的 Geolocation API 来实现。在app.js 脚本中，使用 navigator.geolocation 对象来访问此API。 navigator.geolocation 对象有这样几个方法：getCurrentPosition()，watchPosition()，clearWatch()， 可以帮助我们实现开始的需求。

1 获取位置

首先，通过 getCurrentPosition() 一次性获取浏览器当前位置，在 app.js 中使用如下代码

1

navigator.geolocation.getCurrentPosition(success[, error[, options]]);

各个浏览器都有 Geolocation API 的支持，建议参考相关的帮助文档。这个Demo建议在 Firefox 中测试，因为Chrome似乎禁用从本地文件访问位置。你可以根据需要增加获取位置是否成功后的行为，详情查看 Firefox的开发者文档。

2 持续更新位置

watchPosition() 用于持续“关注” 客户端位置的变化，在每次变化之后，都会将新的位置返回。在 app.js 中增加如下代码，用于在当前位置不断地显示“冰激凌”。

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

function updatePosition (event) {
  var coordinates = {
    lat: event.coords.latitude,
    lng: event.coords.longitude
  };
  var iconUrl = './images/icecream.svg';
  var iconOptions = {
    size: new H.math.Size(26, 34),
    anchor: new H.math.Point(14, 34)
  };
  var markerOptions = {
    icon: new H.map.Icon(iconUrl, iconOptions)
  };
   var marker = new H.map.Marker(coordinates, markerOptions);
  map.addObject(marker);
  map.setCenter(coordinates);
}
// Action
navigator.geolocation.watchPosition(updatePosition);

original resource Part2: Geolocation

complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream

• ← Previous Post
• Next Post →