[程式碼&DEMO] [HackMD完整筆記]

目標

利用navigator.geolocation的API去取得當下裝置的地理位置以及速率。

步驟流程

STEP1 啟動Local Server＆用模器裝置或手機測試

這層資料夾底下運行npm install來安裝browser-sync，
安裝完後可以透過指令npm start來啟動localserver(預設port3000)。
Mac用戶可以用Xcode來模擬移動中的裝置。

STEP2 程式碼

  // 取得HTML中的元素
  const arrow = document.querySelector('.arrow');
  const speed = document.querySelector('.speed-value');
  //監控的方式連續取得使用主者當前地理位置、速度
  navigator.geolocation.watchPosition((data) => {
      // 若成功取回，就會回傳一組Position，將其印出
      console.log(data);
      // 利用coords.speed取得速度(公尺/秒)
      speed.textContent = data.coords.speed;
      // 用coords.heading取得方位（表示偏離北方的角度，0為正北，90為正東）
      // 用element.style.transform =rotate()deg來旋轉指針
      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
    }, (err) => {
    // 假設未取得定位授權，回傳錯誤訊息
      console.error(err);
    });

學習筆記

Navigator.geolocation

• navigator.geolocation.watchPosition

  用監控的方式連續取得當前地理位置。
  當使用者裝置位置更新時，這個函式所傳入的回呼函式就會自動被呼叫。
  可以設定錯誤時哪些err回呼函式需被呼叫。

  語法：
  id = navigator.geolocation.watchPosition(success[, error[, options]])

  [參數]
  success
  一個回呼函式(callback function) 會被傳入一個 Position 的物件。
  error(可選)
  一個選擇性的錯誤回呼函式(callback function)，會被傳入一個PositionError 的物件。
  options (可選)
  一個選擇性 PositionOptions 的物件。

• Navigator.geolocation.getPosition( )

  用以一次性地取得當前的地理位置。

data.coords.{property}

用以取得資訊。
第二個參數若失敗會執行的callback錯誤訊息。

• accurency 目前位置的精確度。
• heading 目前位置指向。
• latitude 經度。
• longitude 緯度。
• speed 當前速度。