HTML5新手入門課程(8)-Geolocation API簡介


HTML5新手入門課程(8)-Geolocation API簡介

想跟風當程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(8)-Geolocation API簡介.

什麼是地理位置定位 (Geolocation) API?

在進行 HTML5 網頁設計時,前端工程師可利用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量,一定要獲得使用者同意才可使用。對於具有GPS(如智慧型手機等)的設備,地理位置更為準確。

用法

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

呈現數據

地理位置定位 (Geolocation API) 可以使用兩種方式呈現: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 (東北)
  • showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後呼叫。
  • ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時呼叫。
  • options(非必要):此參數能讓我們自訂geolocation運作的方式。
    • Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等
    • Civic (城市) 則用能使大多數人理解的方式呈現:城市名表示位置、樓層數表示高度等


參考連結:

HTML5新手入門課程(6)-progress載入進度顯示條

HTML5新手入門課程(7)-Web Storage 瀏覽器儲存

HTML5新手入門課程(9)-Drag and Drop API(上)

前端工程師初學者第一課:CSS代碼特性好簡單!

搞清楚前端工程師的字體世界!-絕對單位

前端工程師看過來!如何用CSS來搞定字體?-相對單位篇 








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

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...