然后将讨论 HTML5 地理定位数据的隐私问题,以及浏览器如何使用这些数据。最后本文将探讨它在实际中的应用,演示并让您学会如何使用它构建一个实用的基于地理位置的 Web 应用。
HTML5 中的新功能
HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中。自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到来更大地促进了 Web 的发展,HTML5 提供了很多新的功能,主要有:
- 新的 HTML 元素,例如 section, nav, header, footer, article 等
- 用于绘画的 Canvas 元素
- 用于多媒体播放的 video 和 audio 元素
- 用于定位的 Geolocation API
- 本地存储以及离线应用
- Web Workers API
本文主要对 HTML5 用于定位的 Geolocation 功能进行讲解,并提供实例,介绍它在实际中的应用。
位置信息
在 HTML5 中,当请求一个位置信息时,如果用户同意,浏览器就会返回位置信息,该位置信息是通过支持地理定位功能的底层设备(比如笔记本电脑或手机)提供给浏览器 的。位置信息由纬度、经度坐标和一些其他元数据组成。例如北京故宫的位置信息主要由一对纬度和经度坐标组成:纬度:北纬 39.9,经度:东经 116.4。
经纬度坐标有两种表示方式:十进制格式(例如 39.9)和 DMS(Degree Minute Second,角度)格式(例如 39 ° 54 ′ 20 ″)。HTML5 Geolocation API 返回的坐标格式为十进制格式。除了纬度和经度坐标,HTML5 Geolocation 还提供位置坐标的准确度。除此之外,它还会提供其他一些元数据,比如海拔、海拔准确度、行驶方向和速度等,具体情况取决于浏览器所在的硬件设备。
位置信息一般从如下数据源获得:
- IP 地址
-
三维坐标
- GPS(Global Positioning System,全球定位系统)
- Wi-Fi
- 手机信号
- 用户自定义数据
它们各有优缺点如表 1 所示,为了保证更高的准确度,许多设备使用多个数据源组合的方式。
表 1. 位置信息获取方式对比
数据源 | 优点 | 缺点 |
---|---|---|
IP 地址 |
任何地方都可用 在服务器端处理 |
不精确(经常出错,一般精确到城市级) 运算代价大 |
GPS | 很精确 |
定位时间长,耗电量大 室内效果差 需要额外硬件设备支持 |
Wi-Fi |
精确 可在室内使用 简单、快捷 |
在乡村这些 Wi-Fi 接入点少的地区无法使用 |
手机信号 |
相当准确 可在室内使用 简单、快捷 |
需要能够访问手机或其 modem 设备 |
用户自定义 |
可获得比程序定位服务更准确的位置数据 用户自行输入可能比自动检测更快 |
可能很不准确,特别是当用户位置变更后 |
浏览器支持情况
各浏览器对 HTML5 Geolocation 的支持程度不同,并且还在不断更新中。好消息是:在 HTML5 的所有功能中,HTML5 Geolocation 是第一批被全部接受和实现的功能之一,相关规范已经达到一个非常成熟的阶段,不大可能做太大改变。如表 2 所示,很多浏览器已经支持 HTML5 Geolocation:
表 2. 浏览器对 HTML5 Geolocation 的支持情况
浏览器 | 支持情况 |
---|---|
Firefox | 3.5 及以上版本支持 |
Chrome | 在带有 Gears 的第 2 版 Chrome 中被支持 |
Internet Explorer | 通过 Gears 插件支持 |
Opera | 在版本 10 中支持 |
Safari | 在版本 4 中支持以实现在 iPhone 上可用 |
由于浏览器对它的支持程度不同,在使用之前最好先检查浏览器是否支持 HTML5 Geolocation API。后面将讲解如何检查浏览器是否支持此功能。本文中所有示例程序都在 Firefox 12.0 上运行测试成功。
发表回复