【JS30】Day21:Geolocation based Speedometer and Compass

javascript 30day

目標:取得裝置地理位置和速度

一、使用 npm 啟動 server

因為練習是取用定位,所以 mac 可以用 Xcode 模擬,
或是用 npm start 啟動內網 ip,連線啟動 server 。

二、Coding

const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');
// 抓取 DOM

navigator.geolocation.watchPosition(
data => {
// 使用 watchPosition 取得裝置資料,若成功就回傳
console.log(data);
// data.coords.speed 取得速度
speed.textContent = data.coords.speed;
// data.coords.heading 取得角度
arrow.style.transform = `rotate(${data.coords.heading}deg)`;
},
err => {
console.error(err);
},
);

使用技巧

  • Geolocation.watchPosition()
【JS30】Day22:Follow Along Link Highlighter 【Vue】Vue 與 webpack

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×