「JavaScript 30」學習筆記（廿一）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

使用地理位置定位（Geolocation）物件取得裝置的地理資訊。

筆記

首先使用 gum 套件建立一個本機伺服器。

npm install
npm start

---

取得箭頭元素。

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

取得速率元素

const speed = document.querySelector('.speed-value');

---

使用 navigator.geolocation 物件的 watchPosition() 方法取得裝置的地理資訊。

navigator.geolocation.watchPosition((data) => {
    // 取得裝置速度
    speed.textContent = data.coords.speed;
    // 取得裝置方位並修改箭頭樣式
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (err) => {
    console.error(err);
});