柠檬铺

使用 HTML 5 Geolocation 构建基于地理位置的 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. 位置信息获取方式对比

浏览器支持情况
各 浏览器对 HTML5 Geolocation 的支持程度不同，并且还在不断更新中。好消息是：在 HTML5 的所有功能中，HTML5 Geolocation 是第一批被全部接受和实现的功能之一，相关规范已经达到一个非常成熟的阶段，不大可能做太大改变。如表 2 所示，很多浏览器已经支持 HTML5 Geolocation：

表 2. 浏览器对 HTML5 Geolocation 的支持情况

由于浏览器对它的支持程度不同，在使用之前最好先检查浏览器是否支持 HTML5 Geolocation API。后面将讲解如何检查浏览器是否支持此功能。本文中所有示例程序都在 Firefox 12.0 上运行测试成功。
隐私
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。不过，从可接触到的 HTML5 Geolocation 应用程序示例中可以看到，通常会鼓励用户共享这些信息。例如，午餐时间到了，如果应用程序可以让用户知道附近餐馆的特色菜及其价格和评论，那么用户就会觉 得共享他们的位置信息是可以接受的。
访问使用 HTML5 Geolocation API 的页面时，会触发隐私保护机制。图 1 显示了在 Firefox 12.0 中触发隐私保护机制的页面。

图 1. HTML5 Geolocation 在 Firefox 12.0 中触发隐私保护机制

因为位置数据属于敏感信息，所以接收到之后，必须小心地处理、存储和重传。如果用户没有授权存储这些数据，那么应用程序应该在相应任务完成后立即删除它。如果要重传位置数据，建议对其进行加密。
HTML5 Geolocation API
本节将详细介绍 HTML5 Geolocation API 的使用方法。
浏览器支持性检查
在调用 HTML5 Geolocation API 函数前，需要确保浏览器支持此功能。当浏览器不支持时，可以提供一些替代文本，以提示用户升级浏览器或安装插件（如 Gears）来增强现有浏览器功能。清单 1 是浏览器支持性检查的一种途径。

清单 1. 检查浏览器支持性

双击代码全选

1

2

3

4

5

6

7

8

function testSupport() {   

   if (navigator.geolocation) {   

       document.getElementById(“support”).innerHTML = "支持 HTML5 Geolocation。";   

   } else {   

   document.getElementById(“support”).innerHTML =   

   "该浏览器不支持 HTML5 Geolocation ！建议升级浏览器或安装插件（如 Gears）。";   

   }   

}

 

在 清单 1 中，testSupport() 函数检测了浏览器的支持情况。这个函数应该在页面加载的时候就被调用，如果浏览器支持 HTML5 Geolocation，navigator.geolocation 调用将返回该对象，否则将触发错误。预先定义的 support 元素会根据检测结果显示浏览器支持情况的提示信息。
位置请求
在 HTML5 Geolocation 功能中，位置请求有两种：

  • 单次定位请求
  • 重复性位置更新请求

单次位置请求
在许多应用中，只检索或请求一次用户位置即可。例如前面提到的，午餐时间到了，要查询用户附近餐馆的特色菜及其价格和评论，就可以使用清单 2 所示的 HTML5 Geolocation API。

清单 2. 单词定位请求 API

 void getCurrentPosition(updateLocation, optional handleLocationError, optional options);

这个函数接受一个必选参数和两个可选参数。

  • 必 选参数 updateLocation 为浏览器指明位置数据可用时应调用的函数。获取位置操作可能需要较长时间才能完成，用户不希望在检索位置时浏览器被锁定，这个参数就是异步收到实际位置信 息后，进行数据处理的地方。它同时作为一个函数，只接受一个参数：位置对象 position。这个对象包含坐标（coords）和一个获取位置数据时的时间戳，许多重要的位置数据都包含在 coords 中，比如：
    < >latitude（纬度）
    longitude（经度）
    accuracy（准确度）
    altitude – 海拔高度，以 m 为单位；
    altitudeAccuracy – 海拔高度的准确度，以 m 为单位；
    heading – 行进方向，相对于正北而言；
    speed – 速度，以 m/s 为单位。
    双击代码全选

    1

    2

    3

    4

    5

    6

    7

    8

    9

    function updateLocation(position) {   

       var latitude = position.coords.latitude;   

       var longitude = position.coords.longitude;   

       var accuracy = position.coords.accuracy;   

            

       document.getElementById(“纬度”).innerHTML = latitude;   

       document.getElementById(“经度”).innerHTML = longitude;   

       document.getElementById(“准确度”).innerHTML = accuracy + “米”;   

    }

     
    可 选参数 handleLocationError 为浏览器指明出错处理函数。位置信息请求可能因为一些不可控因素失败，这时，您需要在这个函数中提供对用户的解释。幸运的是，该 API 已经定义了所有需要处理的错误情况的错误编号。错误编号 code 设置在错误对象中，错误对象作为 error 参数传递给错误处理程序。这些错误编号有：