JavaScript30-Day21-指南針

Posted on | Edited on | In | Comments: 0

21 - Geolocation

筆記

DEMO
GitHub

利用瀏覽器 geolocation API 來製作指南針

  • getCurrentPosition: 取得目前位置資訊

  • watchPosition: 定位資料改變，即回傳資訊

MDN

作法

透過 navigator.geolocation.watchPosition 來即時監聽使用者當前地理位置狀態，再來改變指南針角度即可。

1
2
3
4
5
6
7
const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');
navigator.geolocation.watchPosition(position=>{
    console.log(position)
    speed.textContent = position.coords.speed;
    arrow.style.transform = `rotate(${position.coords.heading}deg)`;
},(err)=>console.log(err))

Coordinates 資料應用

透過 watchPosition, getCurrentPosition 會回傳 Coordinates 資料，其中包含：

  • longitude 經度 > double
  • latitude 緯度 > double
  • altitude 高度 > double (桌機 null)
  • accuracy 經緯度準確度 > double
  • altitudeAccuracy 高度準確度 > double (桌機 null)
  • heading 裝置行進方向(0 代表正北, 如果 speed 為 0 則值為 NaN) > double
  • speed 裝置行進速度 > double