HTML5新特性之Geolocation

在手持設備如此普遍的今天，位置信息對於應用程序來講是極其重要的，打車應用可以根據用戶的位置信息呼叫附近的車輛，團購軟件可以根據當前的位置推薦附近的影院和美食，地圖應用可以根據用戶的位置快速規劃到目的地的路線，可以說位置信息對於移動應用是不可或缺的。
爲了順應這個潮流，HTML5爲我們提供了Geolocation庫，有了它我們就能夠在Web應用中輕而易舉地實現上述這些功能。那麼今天我就爲大家介紹一下這個庫的使用。
首先，我們可以從瀏覽器的navigator對象中通過geolocation屬性獲取到一個Geolocation的實例，如下圖所示：

圖中我們可以看到，Geolocation類有三個常用的方法，他們分別是：

getCurrentPosition: 用於獲取當前的位置信息
watchPosition: 用於在位置變化時實時監測位置信息
clearWatch: 取消正在運行的監測操作

我們先來看一下getCurrentPosition方法，下面是它的函數簽名：

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

第一個參數用於指定一個成功後的處理函數，第二參數用於指定一個錯誤處理函數，第三個用於給函數提供一些可選的配置項。現在我們就來調用這個函數：

navigator.geolocation.getCurrentPosition(function(position) {
    //success handler code goes here
    console.log(position);
}, function(error) {
    //error handler code goes here
    console.log(error);
}, {//options
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
});

一旦這段代碼運行起來，瀏覽器窗口就會彈出一個確認框，請求用戶進行位置定位的授權：

如果我們點擊Allow允許該站點進行位置定位，該函數就開始從設備獲取位置信息，並觸發成功的回調函數，並將位置信息對象傳入回調函數中，上面的代碼中我們在控制檯打印了position，控制檯信息如下：

可以看到，position實際上是一個Geoposition對象的實例，其中包括coords和timestamp兩個屬性，後者是一個時間戳，記錄獲取到位置時的時間，coords裏面包含了很多位置有關的信息：

accuracy: 位置的精確度範圍，單位爲米
altitude: 海拔高度，單位爲米，如果設備不支持高度感應，則該屬性爲null
altitudeAccuracy: 海拔精確度範圍，單位爲米，如果設備不支持高度感應，則該屬性爲null
speed: 設備移動的速度，單位爲米/秒，如果設備不能提供速度信息，該屬性爲null
heading: 當前移動的方向，以數字表示，單位爲角度，以順時針[0, 360)度表示偏離正北方的角度，0表示正北方向，90度表示正東方向，180度表示正南方向，270表示正西方向；需要注意的是，如果speed爲0，則heading會是NaN，如果設備不能提供方向信息，則該屬性爲null
longitude: 經度信息
latitude: 緯度信息

我們在成功的回調函數中接收到這些信息，可以根據實際的設備和應用場景獲取相應的信息，做進一步的操作。
回到剛纔的確認框，如果我們點擊了Block阻止該站點獲取當前的位置信息，代碼就會授權失敗，相應地，失敗的回調函數就會被觸發，error錯誤對象也會被傳入回調函數，我們的打印信息如下：

可以看到error參數是一個PositionError實例，包含一個錯誤碼code和message，分別表示錯誤的類型和錯誤提示消息，其中錯誤碼有以下幾種：

1: PERMISSION_DENIED - 用戶拒絕了授權請求，授權失敗
2: POSITION_UNAVAILABLE - 因爲一些內部錯誤，導致位置獲取失敗
3: TIMEOUT - 超時，超過了配置的超時時間後還未獲取到位置信息

上面就是失敗的回調函數，一般獲取位置出現錯誤時，我們都要及時捕獲，並做相應的處理操作，以獲取好的用戶體驗，這一點很重要。
在上面的調用中，我們還傳入了第三個參數，一個簡單的對象，裏面包含了幾個配置信息，它們都是用來配置函數運行參數的：

enableHighAccuracy: 默認值爲false，如果指定爲true，則表示在設備支持的情況下，儘可能獲取高精準度的數據，但這會在時間和電量方面存在一定的消耗
timeout: 用於指定一個超時時間，單位爲毫秒，表示在超時後停止位置獲取的操作，默認值是Infinity，表示直到獲取到數據後才停止該操作的進行
maximumAge: 用於指定一個緩存位置信息的最長時間，在這個時間段內，獲取位置時會從緩存中取，單位爲毫秒，默認值爲0，表示不使用緩存，每次都取新的數據

上面是關於getCurrentPosition方法的介紹，在某些場景下，例如路線導航應用，我們需要實時地獲取最新位置，進而爲用戶規劃最新的路線，這時，上面的方法已經不能很好的滿足需求了，我們需要使用watchPosition方法：

watchId = navigator.geolocation.watchPosition(success[, error[, options]]);

watchPosition方法的使用方式和getCurrentPosition類似，不同的是，success函數會執行多次，一旦獲取到最新的位置數據，success函數就會被觸發，與之相似地，如果連續獲取最新的數據失敗時，error函數也會被執行多次。
大家或許會注意到，上面的函數簽名中，會返回一個watchId，它標示着當前的watch操作，當我們位置跟蹤任務完成後，可以使用clearWatch函數將這個watchId清除即可：

navigator.geolocation.clearWatch(watchId);

上面就是Geolocation的常用的三個API，日常開發中我們可根據實際情況選用合適的方法，進而獲取用戶的位置信息。
現在大部分瀏覽器都已支持Geolocation了，可是爲了兼容低版本的瀏覽器，我們需要判斷它的支持情況：

if ('geolocation' in navigator) {
  // getting usr's position
} else {
  // tips: your position is not available
}

最後，我們用一個簡單的例子來演示在開發中是如何使用Geolocation的：

var API = {
    //get recommended data by current longitude and latitude
    getSurroundingRecommendations: function(longitude, latitude, callback) {
        //simulate data obtaining from server.
        setTimeout(function() {
            var data = [
                {
                    //item
                },
                {
                    //item
                }
            ];
            callback(data);
        }, 500);
    }
};

document.addEventListener('DOMContentLoaded', function() {
    //detect if Geolocation is supported
    if (!'geolocation' in navigator) {
        console.log('Geolocation is not supported in your browser');
        return;
    }

    var successHandler = function(position) {
        var coords = position.coords,
            longitude = coords.longitude,
            latitude = coords.latitude;

        API.getSurroundingRecommendations(longitude, latitude, function(data) {
            console.log(data);
        });
    },
    errorHandler = function(error) {
        console.log(error.code, error.message);
    },
    options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);

}, false);

在上面的代碼中，首先我們定義一個根據當前位置獲取推薦數據的方法，然後在文檔加載完成後，開始試圖獲取當前位置，並調研這個方法，獲取模擬的數據，真是開發環境中，可能會進一步利用返回的數據做渲染UI等操作。
關於Geolocation的介紹就先到這裏了，謝謝。