今日任務: 顯示目前速度與指南針

前置作業

Browsersync

位置要求一樣需在安全連線(像是https、localhost)下使用
可以看D19前置作業的部分查看詳細介紹

在終端機執行

npm install //安裝package.json內的套件(Browsersync)
npm start //啟動localserver(預設port3000)

手機模擬器

作者下載了Xcode(開發iOS)
這邊是使用手機模擬器

取得元素

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

取得使用者位置

navigator: 物件包含有關使用者的瀏覽器資訊。
geolocation.watchPosition(success, error): 當改變位置的時候自動執行取得當前位置

navigator.geolocation.watchPosition((data) => {
    console.log(data);
});

查看GeolocationCoordinates物件屬性

• accuracy:準確性
• heading: 表示該設備偏離正北方向的角度。0度代表真北，方向是順時針。
• latitude: 代表緯度。
• longitude: 代表經度。
• speed: 代表速度。

將資料渲染到畫面上

navigator.geolocation.watchPosition((data) => {
    console.log(data);
    speed.textContent = data.coords.speed
    arrow.style.transfprm=`rotate(${data.coords.heading}deg)`
});

當使用者拒絕位置要求時

navigator.geolocation.watchPosition(
    (data) => {
        console.log(data);
        speed.textContent = data.coords.speed;
        arrow.style.transfprm = `rotate(${data.coords.heading}deg)`;
    },
    (err) => {
        console.error(err);
        alert('請允許位置要求，指南針才能運作');
    }
);

今日學習到的:

• geolocation.watchPosition(success, error): 當改變位置的時候自動執行取得當前位置
• GeolocationCoordinates物件屬性:
  • accuracy:準確性
  • heading: 表示該設備距離正北方向的距離。0度代表真北，方向是順時針。
  • latitude: 代表緯度。
  • longitude: 代表經度。
  • speed: 代表速度。

效果連結:連結

參考連結:
MDN:geolocation.watchPosition()
MDN: GeolocationCoordinates