HTML5新特性之移動設備API

爲了更好地爲移動設備服務,HTML5推出了一系列針對移動設備的API。javascript

一、Geolocation API

Geolocation接口用於獲取用戶的地理位置。它使用的方法基於GPS或者其餘機制(好比IP地址、WIFI熱點等)。html

下面的方法,能夠檢查瀏覽器是否支持這個接口。html5

if (navigator.geolocation) {
    // 支持
} else {
    //不支持
}

1.1 getCurrentPosition方法

getCurrentPosition方法,用來獲取用戶的地理位置。使用它須要獲得用戶的受權,瀏覽器會跳出一個對話框,詢問用戶是否許可當前頁面獲取他的地理位置。必須考慮兩種狀況的回調函數:一種是贊成受權,另外一種是拒絕受權。若是用戶拒絕受權會拋出一個錯誤。java

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

上面代碼指定了處理當前地址位置的兩個回調函數。git

(1)贊成受權

若是用戶贊成受權,就會調用geoSuccess。web

function geoSuccess(event) {
    var coords = event.coords;
    console.log('latitude: ' + coords.latitude);    //緯度
    console.log('longitude: ' + coords.longitude);    //經度
    console.log('accuracy: ' + coords.accuracy);    //精度
    console.log('altitude: ' + coords.altitude);    //海拔
    console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度(單位:米)
    console.log('heading: ' + coords.heading);    //以360度表示的方向
    console.log('speed: ' + coords.speed);    //每秒的速度(單位:米)
}

geoSuccess的參數是一個event對象。event.coords屬性指向一個對象,包含了用戶的位置信息,主要是如下幾個值:api

  • coords.latitude:緯度
  • coords.longitude:經度
  • coords.accuracy:精度
  • coords.altitude:海拔
  • coords.altitudeAccuracy:海拔精度(單位:米)
  • coords.heading:以360度表示的方向
  • coords.speed:每秒的速度(單位:米)

(2)拒絕受權

若是用戶拒絕受權,就會調用geoError。數組

function geoError(event) {
    console.log('Error code ' + event.code + '. ' + event.message);
}

geoError的參數也是一個event對象。event.code屬性表示錯誤類型,有四個值:瀏覽器

  • 0:未知錯誤,瀏覽器沒有提示出錯的緣由,至關於常量event.UNKNOWN_ERROR。
  • 1:用戶拒絕受權,至關於常量event.PERMISSION_DENIED
  • 2:沒有獲得位置,GPS或其餘定位機制沒法定位,至關於常量event.POSITION_UNAVAILABLE。
  • 3:超時,GPS沒有在指定時間內返回結果,至關於常量event.TIMEOUT。

event.message爲錯誤提示信息。緩存

(3)設置定位行爲

getCurrentPosition方法還能夠接受一個對象做爲第三個參數,用來設置定位行爲。

var option = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0
};

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

這個參數對象有三個成員:

  • enableHighAccuracy:若是設爲true,就要求客戶端提供更精確的位置信息,這會致使更長的定位時間和更大的耗電,默認設置爲false。
  • timeout:等待客戶端作出迴應的最大毫秒數,默認值爲Infinity(無限)。
  • maxinumAge:客戶端可使用緩存數據的最大毫秒數。若是設爲0,客戶端不讀取緩存;若是設爲infinity,客戶端只讀取緩存。

1.2 watchPosition方法和clearWatch方法

watchPosition方法能夠用來監聽用戶位置的持續改變,使用方法與getCurrentPosition方法同樣。

var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);

一旦用戶位置發生改變,就會調用回調函數。

若是要取消監聽,則使用clearWatch方法。

navigator.geolocation.clearWatch(watchID);

二、Vibration API

Vibration接口用於在瀏覽器中發出命令,使得設備振動。因爲該操做很耗電,在低電量時最好取消該操做。

使用下面的代碼檢查該接口是否可用。目前,只有Chrome和Firefox的Android平臺最新版本支持它。

navigator.vibrate = navigator.vibrate ||
                               navigator.webkitVibrate ||
                               navigator.mozVibrate ||
                               navigator.msVibrate;

if (navigator.vibrate) {
    // 支持
}

vibrate方法可使得設備振動,它的參數就是振動持續的毫秒數。

navigator.vibrate(1000);

上面的代碼使得設備振動1秒鐘。

vibrate方法還能夠接受一個數組做爲參數,表示振動的模式。偶數位置的數組成員表示振動的毫秒數,奇數位置的數組成員表示等待的毫秒數。

navigator.vibrate([500, 300, 500]);

上面代碼表示,設備先振動500毫秒,而後等待300毫秒,再接着振動500毫秒。

vibrate是一個非阻塞式的操做,即手機振動的同時,JavaScript代碼繼續向下運行。要中止振動,只有將0毫秒傳入vibrate方法。

navigator.vibrate(0);

三、亮度調節

當移動設備的亮度傳感器,感知外部亮度發生顯著變化時,會觸發devicelight事件。目前,只有Firefox佈署了這個API。

window.addEventListener('devicelight', function(event) {
    console.log(event.value + 'lux');
})

下面代碼表示,devicelight事件的回調函數,接受一個事件對象做爲參數。該對象的value屬性就是亮度值。

這種API的一種應用是,咱們能夠針對亮度的強弱來改網頁背景和文字顏色。

四、參考連接

[1] Ryan Stewart, Using the Geolocation API

[2] Rathnakanya K. Srinivasan, HTML5 Geolocation

[3] Craig Buckler, How to Use the HTML5 Vibration API

[4] Tomomi Imura, Responsive UI with Luminosity Level

[5] Ruanyf, 移動設備API

相關文章
相關標籤/搜索