HTML5新功能Geolocation構建基於地理位置的Web應用

然後將討論HTTP://www.aliyun.com/zixun/aggregation/79228.html"> HTML5 地理定位資料的隱私問題，以及瀏覽器如何使用這些資料。 最後本文將探討它在實際中的應用，演示並讓您學會如何使用它構建一個實用的基於地理位置的 Web 應用。

HTML5 中的新功能

HTML5 是最新一代的 HTML 規範，是 W3C 與 WHATWG 合作的結果，目前仍外于開發中。 自從上一代 HTML4，Web 世界已經發生了巨大的變化，HTML5 的到來更大地促進了 Web 的發展，HTML5 提供了很多新的功能，主要有：

新的 HTML 元素，例如 section, nav, header, footer, article 等 用於繪畫的 Canvas 元素 用於多媒體播放的 video 和 audio 元素 用於定位的 Geolocation AP I 本機存放區以及離線應用 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 中支援 Sa fari 在版本 4 中支援以實現在 iPhone 上可用

由於瀏覽器對它的支援程度不同，在使用之前最好先檢查瀏覽器是否支援 HTML5 Geolocation API。 後面將講解如何檢查瀏覽器是否支援此功能。 本文中所有示常式序都在 Firefox 12.0 上運行測試成功。