js獲取地理位置資訊簡單介紹

螞蟻小編發表於2017-04-14

本章節介紹一下如何利用javascript獲取地理位置資訊,這個需求當前也是非常廣泛的。

檢查你的瀏覽器是否支援地理位置資訊API:

目前主流的瀏覽器都已經對JavaScript地理位置資訊API有了較好的支援。

但如果你還不放心,那麼,確認地理位置資訊API支援情況最好的方式是瀏覽器的功能特徵測試。

[JavaScript] 純文字檢視 複製程式碼
if("geolocation" in navigator) {
 //w00t!
}
else {
 alert("很不幸!你的瀏覽器並不支援Geolocation API功能");
}

對於判斷瀏覽器是否支援地理位置API,最主要的就是看看navigator.geolocation這個物件,使用in,而不是簡單的使用if(navigator.geolocation),這一點非常重要,因為後者有可能會因此初始化地理位置資訊物件,從而佔用/鎖定了裝置資源。

查詢地理位置資訊:

這個navigator.geolocation.getCurrentPosition方法是獲取詳細位置資訊最關鍵的一個介面:

[JavaScript] 純文字檢視 複製程式碼
if("geolocation" in navigator) {
 navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position);
 });
}

一旦你呼叫了這個方法(如果請求成功,它會執行你在引數裡提供的回撥方法),瀏覽器會詢問使用者是否允許程式獲取他們的地理位置資訊。

當使用者執行網頁獲取他們的位置資訊後,瀏覽器就可以開始讀取地理資訊,它會返回給你一個位置資訊物件,物件的結構基本是這樣的:

[JavaScript] 純文字檢視 複製程式碼
// "Position" object
{
 coords: { "Coordinates" object
 accuracy: 65,
 altitude: 294.4074401855469,
 altitudeAccuracy: 10,
 heading: -1,
 latitude: 43.01256284360166,
 longitude: -89.44531987692744,
 speed: -1
 },
  
 timestamp: 1429722992094269
}

相關文章