javascript

使用地理位置資訊API取得當前經緯度

莊君威 2019/08/05 09:00:00
652

 

前言

透過瀏覽器內的 javascript 地理位置資訊 API 來獲取詳細地理資訊,

Geolocation 物件定義了三個方法 getCurrentPosition()

watchPosition()clearWatch()

 

 

開發環境

JDK8

HTML5

jQuery 2.1.4

TOMCAT8

Eclipse

 

1.

檢查是否支援

Geolocation API 是透過 navigator.geolocation 物件所發布,

首先,要檢查你的瀏覽器是否支援地理位置資訊API,可先測試地理

位置定位是否存在:

 

    

 

對於判斷是否存在,主要就是看 navigator.geolocation 這個物件,

使用 in 而不是單純使用 if(navigator.geolocation),因為使用後者

可能會初始化地理位置資訊,因而佔用資源。

 

2.

取得目前位置

若要取得使用者當前位置,可呼叫 getCurrentPosition() 方法,

 

 

一但呼叫了這個方法,瀏覽器會先詢問使用者是否允許程式獲取地理位

置資訊:

 

      

 

點擊允許獲取使用者位置後,就可以開始讀取地理資訊,此時會返回一個

Position物件,位置資訊則包含在此物件的coords屬性中,詳細內容

如下:

 

Position物件屬性

內容

coords

Coordinates座標物件,存放傳回之位置資訊

timestamp

取得位置資訊的時間(毫秒)

coords.latitude

緯度(degree

coords.longitude

經度(degree

coords.altitude

海拔高度(meter)若裝置不支援則回傳0

coords.accuracy

位置的精確度範圍(meter

coords.altitudeAccuracy

海拔精確度範圍(meter)若裝置不支援則回傳0

coords.heading

當前移動的方向(degree

coords.speed

裝置的移動速度(m/s

 

取得當前經緯度的範例結果如下:

    

3.

觀看目前位置

若使用者的定位資訊持續改變,可使用 watchPosition() 方法來觀看使用

者的位置:

 

 

此時會回傳一組 id;若要停止觀看使用者的位置,可以使用 clearWatch() 

方法:

 

 

4.

錯誤回報

而當呼叫 getCurrentPosition() 及 watchPosition() 時,

若發生錯誤,根據回傳的 code 代碼可分為以下幾種狀態:

 

    

UNKNOW_ERROR:不明原因錯誤

PERMISSION_DENIED:使用者拒絕位置服務,或瀏覽器設

定不允許使用位置服務

POSITION_UNAVAILABLE:無法取得位置資訊(ex.連線中斷)

TIMEOUT:逾時仍未回傳

 

瀏覽器相容性

Chrome

IE

Safari

Firefox

Opera

5

9

5

3.5

16

 

 

透過以上地理位置資訊API的介紹與教學,相信使用起來會非常簡單,

以目前網頁程式的開發來說,對於取得使用者的地理資訊算是相當普遍

,尤其現在手持裝置居多,這項功能就顯得相當重要,像是可以提供距

離計算的服務,或是可以依照不同使用者位於不同的地區,設計出來的

功能會有不一樣的使用者體驗。

 

莊君威