DIV CSS 佈局教程網

一、Geolocation 概述

Geolocation API 在網頁中使用 geolocation 對象向JavaScript 提供經度和緯度。利用 geolocation 對象，可以獲取用戶位置和跟蹤用戶位置的變化。

1.1 Geolocation API 獲取地理位置的方式

設備使用下列數據源：

• IP地址 - 任何地方可用，不精確
• GPS - 很精確，定位需要時間長，耗電大，室內效果不好，需要額外設備
• WiFi基站的Mac地址 - 精確，可在室內使用，在無線接入點少的地方效果不好
• GSM或CDMA基站 - 相當准確，可在室內使用，在基站較少的地區效果不好

為了使用更高的准確度，許多設備使用一個或更多的數據源組合。

1.2 地理位置獲取流程：

1. 用戶打開需要獲取地理位置的web應用。
2. 應用通過Geolocation API 向浏覽器請求地理位置，浏覽器攔截請求，向用戶請求授權。
3. 假設用戶允許，浏覽器從設備查詢相關信息，如IP地址、WIFI地址或GPS坐標。
4. 浏覽器將相關信息發送給信任的外部定位服務器，服務器返回具體的地理位置。

1.3 隱私

Geolocation API 規范提供了一套保護用戶隱私的機制，必須先得到用戶明確許可，才能獲取用戶的位置信息。

訪問使用Geolocation API的頁面應用時，會觸發隱私保護機制，浏覽器會詢問用戶是否共享位置信息。

用於收集位置數據的應用程序的開發人員應考慮關於隱私的以下准則：

因為位置數據屬於敏感信息，所以開發人員應考慮遵循以下准則：

• 僅在必要時請求位置信息，並且僅將位置信息用於其原計劃用於的任務。
• 如果用戶沒有授權存儲這些數據，那麼應用程序應該在相應任務完成後立即刪除。
• 如果要在服務器上存儲位置數據，請務必確保位置數據不受到未經授權的訪問，並允許用戶更新和刪除此信息。

1.4 應用場景

• 更新本地信息
• 顯示用戶周圍的興趣點
• 車載導航系統

二、Geolocation 使用

Geolocation API的使用很簡單，請求一個位置信息，如果用戶同意，就返回位置信息。

2.1 檢測浏覽器是否支持Geolocation

在使用Html5 Geolocation API時，應確保浏覽器支持Geolocation API.

if (navigator.geolocation) { console.log('Geolocation is supported.');} else { console.log('geolocation is not supported in your broswer.');}

2.2 getCurrentPosition 和 watchPosition

• 使用 getCurrentPosition 方法獲取當前的地理位置。
• 使用 watchPosition 方法監視位置隨時間變化的情況。

語法：

// getCurrentPositionnavigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);// watchPositionnavigator.geolocation.watchPosition(successCallback, errorCallback, options);

這兩個方法都就使用的是異步回調的方式。它們有相同的參數：

1. successCallback – 為浏覽器成功獲得位置信息後的回調函數。
2. errorCallback – 用於位置信息獲取失敗時的回調函數。
3. options – 配置參數，可以調整geolocation的數據收集方式
   • enableHighAccuracy - 指示浏覽器獲取高精度的位置，默認為false。當開啟後，可能沒有任何影響，也可能使浏覽器花費更長的時間獲取更精確的位置數據。
   • timeout - 最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。默認為0，表示浏覽器需要立刻重新計算位置。
   • maximumAge - 表示程序能接受的被緩存位置的最大過期時間。接受一個數字作為參數，默認為0微秒。這就意味這默認每次獲取位置都必需重新獲取一個新位置。

2.3 clearWatch()

這個方法接受一個參數，需要清理監視位置變化的方法的id：watchID（這個參數由watchPosition方法返回）。

2.4 示例：

var watchId = navigator.geolocation.watchPosition(function(position) { // succes callback var coords = position.coords; console.log(coords.latitude); // 緯度 console.log(coords.longitude); // 經度 console.log(coords.accuracy); // 准確度，由於geolocation的實現方式，呈現返回值時一定要檢查返回值的准確度 console.log(coords.altitude); // 海拔，以米為單位，如不支持altitude特性，返回null console.log(coords.altitudeAccuracy); // 海拔經度，以米為單位，如不支持altitude特性，返回null console.log(coords.heading); // 行進方向，相對正北 console.log(coords.speed); // 行進速度，單位m/s console.log(timestamp); // 獲取位置的時間}, function(error) { // error callback console.log('獲取位置信息失敗。'); console.log(error.code); // UNKNOWN_ERROR (error code 0) - 未知錯誤 // PERMISSION_DENIED (error code 1) - 用戶拒絕共享地理位置 // POSITION_UNAVAILABLE (error code 2) - 無法獲取當前位置 // TIMEOUT (error code 3) - 在指定時間無法獲取位置會觸發此錯誤。}, { // options enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 });

三、Geolocation Demo

• Html5doctor.com/demos/geolocation/geolocation-watchposition-example.Html