HTML5 Java 前端工程師

必學的HTML5入門課程-Geolocation API

2019-06-05

必學的HTML5入門Geolocation API是什麼?

 

必學的HTML5入門Geolocation API是什麼?
必學的HTML5入門Geolocation API是什麼?

HTML5 網頁中,前端工程師可以使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。當然, 基於隱私權的考量,這一定要取得使用者同意才可以使用。對於具有GPS功能(如智慧型手機等)的設備,地理位置顯示將更為準確。

用法

HTML5 使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。

Javascript 語法如下:
(※以下的語法通通都是寫在 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入門-DRAG AND DROP API(上)

 

前端工程師的HTML5入門-DRAG AND DROP API(下)

 

網頁設計愛用的HTML5三種元素排版

 

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

 

想當前端工程師就快把CSS語法格式學起來!!

 

前端工程師的必修課程-CSS的繼承關係

 

前端工程師必學的課程-CSS的border屬性解釋

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料