網頁設計之HTML5初級教學(10)-地理位置定位介紹
什麼是地理位置定位 (Geolocation) API?
一般來說，在 HTML5 網頁，前端工程師是可以使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量，一定得先獲得使用者同意才可使用。對於具有GPS（如智慧型手機等）的設備，地理位置更為準確。
用法
使用 Geolocation 的主要方法是 getCurrentPosition，可以讀取到用戶設備的當前地理位置。該語法如下所示：
(※以下的語法通通都是寫在 Javascript裡)
(※以下的語法通通都是寫在 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初級教學(11)-善用SVG取代點陣圖
網頁設計之HTML5初級教學(1)-七大內容模組介紹
專家不藏私HTML5教學之1-想要網頁舒服好閱讀,排版是關鍵
中國IT教育領導品牌 達內教育集團第一家海外授權中心
信不信由你,因為Java課程讓我獲得我想要的生活!
加護病房的守護天使又多了一位!有望這人工智慧的突破使更多人受惠
Python課程無所不能!兩秒就知道你身體哪裡有毛病
