前端工程師入門HTML5就靠這些撇步!(9)地理位置定位


前端工程師入門HTML5就靠這些撇步!(9)地理位置定位


HTML5的取得用戶地理位置原來是這麼回事!!今天帶你一探究竟!

首先,先了解:什麼是地理位置定位 (Geolocation) API

HTML5 網頁裡,前端工程師可利用地理位置定位 (Geolocation API) 來取得用戶的地理位置,對於具有GPS(如智慧型手機等)的設備,地理位置會更為準確。

但基於隱私上的考量,這功能必須要獲得使用者的同意才可使用。

用法

使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。語法如下:
(※以下的語法通通都是寫在 Javascript裡)
navigator.geolocation.getCurrentPosition();

參數:

🔼showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後,開始呼叫。

🔼ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時才呼叫

🔼options(非必要):此參數能讓我們自訂geolocation的運作方式。

 

呈現數據

地理位置定位 (Geolocation API) 可以使用兩種方式呈現:Geodetic(地理測量) 與 Civic(城市):

🔼Geodetic (地理測量) :直接呈現經緯度座標表示位置、水平線上的距離(如公尺) 表示高度等

🔼Civic (城市) :則用能使大多數人理解的方式呈現:城市名表示位置、樓層數表示高度等

屬性 Geodetic Civic
Position (位置) 25.0,121.6 Taipei (台北)
Elevation (高度) 508 meters (508公尺) 101th floor (101樓)
Heading (以360度表示的方向) 234 degrees (234度) City Centre (市中心)
Speed (速度) 5km/h (時速5km) Walking (步行)
Orientation (手機的擺放方向) 45 degrees (45度) North-East (東北)




👉 延伸閱讀區:

前端工程師入門HTML5就靠這些撇步!(7)瀏覽器儲存簡介

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素

前端工程師入門HTML5就靠這些撇步!(8下)製作拖曳元素

網路行銷課程設定目標族群太難?可愛虛擬人物幫你撒下行銷大網

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

是日救星!人工智慧語音辨識 APP 雅婷逐字稿,台灣國語也逃不過雅婷的掌心!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?



這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

前端工程師設定CSS背景的五種方法(五)設定背景顏色

RWD和AWD是啥?差別又是什麼?前端工程師課程大解密!