Geolocation API

HTML5 Geolocation API，它允许用户在 web 应用程序中共享他们的的位置，使其能够享受位置感知服务。
HTML5 Geolocation 位置信息主要有：纬度，经度和其他特性，比如准确度、时间戳等等。
获取位置信息的途径有：GPS、Wi-Fi 和蜂窝站点等。
Geolocation API 中有两种类型的定位请求函数：单次定位请求和重复性的位置更新请求。
应用场景：共享位置，计算行走（跑步）路程，GPS 导航的社交网络应用等等。

一、位置信息
HTML5 Geolocation API 的使用方法相当简单。请求一个位置信息，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持 HTML5 地理定位功能的底层设备（如 PC 或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。有这些位置信息就可以构建位置感知类应用程序了。
（1）纬度和经度坐标
经纬度坐标可以用两种方式表示：
A. 十进制格式（e.g: 39.172 22）
B. DMS (Degree Minute Second,角度)格式（e.g: 61°26'24'）
HTML5 Geolocation API 返回坐标的格式是十进制格式。另外，HTML5 Geolocation 还提供位置坐标的准确度。它还可能会提供其他一些元数据，具体情况取决于浏览器所在的硬件设备，这些元数据包括海拔、海拔准确度、行驶方向和速度等。这些元数据不存在则返回 null。
（2）位置信息来源
HTML5 Geolocation API 不指定设备使用哪种底层技术来定位应用程序的用户，相反，它只是用于检索位置信息的 API ，而且通过该 API 检索到的数据只具有某种程度的准确性。它并不能保证返回的时机位置是精确的。
设备可以使用下列数据源：

• IP 地址
• 三维坐标:GPS(Global Positioning System，全球定位系统)；从 RFID、Wi-Fi 和蓝牙到 Wi-Fi 的 MAC 地址；GSM 或 CDMA 手机的 ID.
• 用户自定义数据
  为了保证更高的准确度，许多设备使用 1 个或多个数据源的组合。

二、数据源优缺点
（1）IP 地址地理定位数据
基于 IP 地址的地理定位的实现方式是：自动查找用户的 IP 地址，然后检索其注册的物理地址。因此，如果用户的 IP 地址是 ISP( Internet Service Provider，互联网服务提供商 )的，其位置往往就由服务供应商的物理地址决定，该地址可能距离用户数千米。所以，它返回的位置信息通常不靠谱。。。。。
基于 IP 地址的地理位置数据的优缺点：

优点	缺点
任何地方都可用;在服务器端处理	不精确（经常出错，一般精确到城市级）;运算代价大

（2）GPS 地理定位数据
只要看得到天空的地方，GPS 就可以提供非常精确的定位结果。GPS 定位是通过收集运行在地球周围的多个 GPS 卫星的信号实现的。但是，它的定位时间比较长，因此它不适合需要快速响应的应用程序。
基于 GPS 地理定位数据的优缺点：

优点	缺点
很精确	定位时间长，用户耗电量大;室内效果不好;需要额外硬件设备

（3）Wi-Fi 的地理定位数据
基于 Wi-Fi 的地理定位信息是通过三角距离计算得出的，这个三角距离指的是用户当前位置到已知的多个 Wi-Fi 接入点（几乎都在城市里）的距离。不同于 GPS ，Wi-Fi 在室内也非常准确。
基于 Wi-Fi 的地理定位数据的优缺点：

优点	缺点
精确;可在室内使用;可以简单、快捷定位	在乡村这些无线接入点较少的地区效果不好

（4）手机地理定位数据
基于手机的地理定位信息是通过用户到一些基站的三角距离确定的。这种方法可提供相当准确的位置结果。它通常同基于 Wi-Fi 和基于 GPS 的地理定位信息结合使用。
基于手机的地理定位数据的优缺点：

优点	缺点
相当准确;可在室内使用;可以简单、快捷定位	需要能够访问手机或其 modem 的设备;在基站较少的偏远地区效果不好

（5）用户自定义的地理定位数据
应用程序可能允许用户输入他们的地址、邮政编码和其他一些详细信息。应用程序可以利用这些信息来提供位置感知服务。
用户自定义的地理定位数据的优缺点：

优点	缺点
用户可以获得比程序定位服务更为准确的位置数据;允许地理定位服务的结果作为备用位置信息;用户自行输入可能比自动检测更快	可能很不准确，特别是当用户位置变更后

三、HTML5 Geolocation 的浏览器支持情况
可以访问 http://caniuse.com/

Paste_Image.png

如果必须支持早期版本的浏览器，最好在调用 API 之前，检查浏览器是否支持 Geolocation。

四、隐私
HTML5 Geolocation 规范提供了一套保护用户信息隐私的机制。除非得到用户明确许可，否则不可获取位置信息。
HTML5 地理定位浏览器和设备的隐私架构说明：
（1）用户从浏览器中打开位置感知应用程序；
（2）应用程序 web 页面加载，然后通过 Geolocation 函数调用请求位置坐标。浏览器拦截这一请求，然后请求用户授权。这里假设用户同意。
（3）浏览器从其宿主设备中检索坐标信息。例如：IP 地址、Wi-Fi 或 GPS 坐标，这是浏览器的内部功能。
（4）浏览器将坐标发送给受信任的外部定位服务。它返回一个详细位置信息，并将该位置信息发回给 HTML5 Geolocation 的应用程序。
注意：应用程序不能直接访问设备，它只能请求浏览器来代表它访问设备。

执行 HTML5 Geolocation 代码时会触发这一机制。如果仅仅是添加 HTML5 Geolocation 代码，而不被任何方法调用，则不会触发隐私保护机制。只要所添加的 HTML5 Geolocation 代码被执行，浏览器就会提示用户应用程序要共享他们的位置。

在收集地理定位数据时，应用程序应该着重提示用户以下内容：
会收集位置数据；（can or can’t）
为什么收集位置数据；（why）
位置数据将保存多久；（save）
如何保证数据安全；（safe）
位置数据怎样共享，和谁共享（同意的话）；（share）
用户怎样检查和更新他们的位置数据；（examine and update）

五、HTML5 Geolocation API 的使用
上面说过了，位置请求有两种，单次请求和重复性的位置更新请求。
单次请求（一次更新）：
navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError，option)
重复更新：
navigator.geolocation.watchPosition(updateLocation,handleLocationError)
关闭更新：
navigator.geolocation.clearWatch(watchId)

函数说明：
updateLocation()
只要浏览器具备访问位置信息的条件，就会调用 updateLocation() 函数，该函数只接受一个参数：位置对象。这个对象包含坐标（coords 特性）和一个获取位置数据时的时间戳。在实际开发中不一定需要时间戳，重要的数据都包含在了 coords 特性中。

handleLocationError()
因为位置计算服务很可能出错，所以对于 HTML5 Geolocation 应用程序来说错误处理非常重要。很幸运，Geolocation API 定义了所有需要处理的错误情况的错误编号。编号错误设置在错误对象(error)中，错误对象的 code 特性传递给错误处理程序。
（1）PERMISSION（错误编号为 1）-----用户选择拒绝浏览器获得其位置信息；
（2）POSITION_UNAVAILABLE（错误编号为 2）-----尝试获取用户位置数据，但失败了；
（3）TIMEOUT（错误编号为 3 -----设置了可选的 timeout 值。尝试确定用户位置的过程超时。

option
如果要同时处理正常情况和错误情况，就应该把注意力集中到三个可选参数（enableHighAccuracy、timeout 和 maximumAge），将这三个可选参数传递给 HTML5 Geolocation 服务以调整数据收集方式。
注意：这三个参数可以使用 JSON 对象传递，这样更便于添加到 HTML5 Geolocation 请求调用中。
（1）enableHighAccuracy：如果启用该参数，则通知浏览器启用 HTML5 Geolocation 服务的高精确度模式。参数的默认值为 false。如果启用此参数，可能没有任何差别，也可能会导致机器花费更多的时间和资源来确定位置，所以应谨慎使用。
（2）timeout：单位为 ms，告诉浏览器计算当前位置所允许的最长时间。如果在这个时间段内未完成计算，就会调用错误处理程序。其默认值为 Infinity，即无穷大或无限制。
（3）maximumAge: 这个值表示浏览器重新计算位置的时间间隔（即表示的是频率）。单位为 ms，此值默认为零，这意味着浏览器每次请求时必须立即重新计算位置。
注意：地理定位 API 不允许指定浏览器多长时间重新计算一次位置。这是完全由浏览器的实现所决定的。我们能做的只是告诉浏览器 maximumAge 的返回值是什么。实际频率是一个无法控制的细节。

watchId
它是 watchPosition() 函数的返回值。watchId 表示一个唯一的监视请求以便将来取消监视。
示例：

var watchId=navigator.geolocation.watchPosition(updateLocation,handleLocationError);
navigator.geolocation.clearWatch(watchId);

六、完整示例
https://lindazhang102.github.io/HTML5/odometer.html