21 - Geolocation

tags: JavaScript30

專案簡介

第十九天的不只有點難，延至最後一天做

第二十一天的目標是串流 API ，偵測網頁使用者的時速及方位，取得經緯度

課程影片：JS30 21
導讀影片：Alex

初始文件

Github 檔案位置：21 - Geolocation

網站初始的樣子

可以先玩玩 最後的成品 只是可能要去外面狂奔一下(誤

正式製作

今天要做的事情很單純，只是實際使用 Navigator API 的功能而已

其中我們應用到了 Navigator.geolocation 物件，這個物件可以存取使用者的位置資訊

最後我們使用了 Geolocation.watchPosition() 函式，當使用者位置更新時就會自動呼叫回呼函示，並傳入 Position 物件，其中有裝置在地球上的二維位置、海拔高度、速度等等

const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed');

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

最後程式碼

const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed');

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

完成結果圖

最後的成品

結語

以上是第二十一天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript Geolocation based Speedometer and Compass - #JavaScript30 21/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 21：Geolocation
MDN Web Docs