踏入前端工程師領域必備的九堂 HTML5 課(八)-Geolocation API(地理位置定位)簡介
踏入前端工程師領域必備的九堂 HTML5 課(八)-Geolocation API(地理位置定位)簡介

 

 

 

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

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

用法

使用 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 入門課 (一)

 

新手前端工程師需要的 HTML5 入門課 (二)

 

新手前端工程師需要的 HTML5 入門課 (三)

 

新手前端工程師需要的 HTML5 入門課 (四)

 

新手前端工程師需要的 HTML5 入門課 (五)

 

新手前端工程師需要的 HTML5 入門課 (六)

 

新手前端工程師需要的 HTML5 入門課 (七)

 

新手前端工程師需要的 HTML5 入門課 (九-上)

 

新手前端工程師需要的 HTML5 入門課 (九-下)

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()