目標

操作 Geolocation API ，取得目前所在方位，與行進速度。

Demo | Github

處理步驟

由於教學影片使用 Xcode 來針對行動裝置模擬，並模擬行進速度與方向，而我使用 Windows 10 ，要直接在模擬器開啟尚須要一些設定，加上不確定 Android 有無 Geolocation 的模擬範例(模擬步行或是開車)，所以就直接上 Github 看結果。

另外也可以直接連接手機測試，透過 Chrome 的 remote-debugging

步驟 1.

取得 DOM 資料

// 取得方向 DOM
const arrow = document.querySelector(".arrow");
// 取得速度 DOM
const speed = document.querySelector(".speed-value");

步驟 2.

改變顯示資料，但是因為瀏覽器支援因素，目前手上的測試 speed 與 heading 皆是 null

navigator.geolocation.watchPosition(
  data => {
    console.log(data);
    speed.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
  },
  err => {
    console.error(err);
  }
);

筆記與備註事項

JavaScript 部分

地理位置定位 (Geolocation)

Web Apps 若需要使用者的位置，可透過 Geolocation API 取得相關資訊。而基於隱私權的考量，這些 Web Apps 均必須取得使用者的許可之後，才能發佈位置資訊。
資料來源 - MDN

Geolocation.watchPosition()

Geolocation.watchPosition() 這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。你也可以選擇性的定義錯誤時哪些錯誤回呼函式(error callback function) 需要被呼叫。
資料來源 - MDN

Coordinates

Coordinates 這個介面用來存取裝置的經緯度，速度以及這些數值的準確度。
資料來源 - MDN

ShunNien's Blog

JS30紀錄 21-Geolocation

目標