---
# System prepended metadata

title: '[JS30] Day.21 Geolocation based Speedometer and Compass'
tags: [JS30]

---

# [JS30] Day.21 Geolocation based Speedometer and Compass 
###### tags: `JS30`
## 任務 Task
抓取瀏覽器的 `Geoloction` 資料，並運用做成指北針。

==完成時間：10min==
## 步驟 Step
1. 使用 `navigator.geolocation` 取得瀏覽器位置資料。
2. 使用 `getCurrentPosition` method 回傳一個 `callback function`。
3. 運用裡面的資料，不過在 `chrome` 上沒辦法取得所有資料，可取得的只有經緯度。
4. 位置資料：
![](https://i.imgur.com/mgNdy7o.jpg)
 
## 筆記 Note
### <font color=#337EA9>JS Geolocation</font>
* 為 `Geolocation API` 可以透過 `navigator.geolocation` 物件取得瀏覽器位置等資訊。
* **Method：**
    * `getCurrentPosition()`：
         1. 取得目前位置，成功後回傳位置資料物件，並執行 `callback function`。
         2. 缺點為精準度較低，只回傳一次。
    * `watchPosition()`：
         1. 取得目前位置，成功後回傳位置資料物件，並執行 `callback function`。
         2. 當位置資訊變動時，會持續回傳位置資料物件，可提供更精確的位置資訊。
* **Property：**
    * `coords.accuracy`：目前位置經緯度的精準度(公尺)。
    * `coords.altitude`：目前海拔高度(公尺)。
    * `coords.altitudeAccuracy`：目前海拔精準度(公尺)。
    * `coords.heading`：目前方向角度，以北方為零度順時針計算。
    * `coord.latitude`：目前位置緯度。
    * `coord.longitude`：目前位置經度。
    * `coord.speed`：目前速度(公尺/秒)。
    * `timestamp`：回傳位置物件時的時間物件(時間戳記) `DOMTimeStamp` (豪秒)。
    * **補充：**`Unix timestamp` 時間戳記，定義為從格林威治時間 1970 年 01 月 01 日 00 時 00 分 00秒，到現在經過的總秒數。
## 連結
[MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Navigator/geolocation)