菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?
菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

要在HTLM5網頁中達到定位其實並不難,只要按照以下幾個步驟就可以輕鬆辦到!

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

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

用法

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

navigator.geolocation.getCurrentPosition();

參數:

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

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

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

呈現數據

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

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

2. 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新手指南(十一)-SVG圖檔超好用?


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內課程先就業再付款- 中時電子報


不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!


HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

發佈留言

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