Привет, ребята🙌

Сегодня я закончил 21-е видео JavaScript30!

Проект 21: Спидометр и компас на основе геолокации

Источник: https://javascript30.com

Обучение:

Сегодняшняя задача — создать спидометр и компас на основе геолокации.

Мы получили логотип компаса из SVG, мы применим к нему преобразование на основе данных из объекта Position.

Получение элементов HTML -

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

Мы используем watchPosition для получения данных. Если данные о местоположении изменяются (либо из-за движения устройства, либо из-за поступления более точной геоинформации), мы можем настроить функцию обратного вызова, которая вызывается с этой обновленной информацией о местоположении. Это делается с помощью функции watchPosition(). Функция обратного вызова вызывается несколько раз, что позволяет браузеру либо обновлять ваше местоположение по мере нашего перемещения, либо предоставлять более точное местоположение, поскольку для геолокации используются различные методы. Функция обратного вызова ошибки, которая не является обязательной, может вызываться повторно.

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

Манипулирование элементами DOM с данными о положении -

// inside watchPosition
speed.textContent = data.coords.speed;
arrow.style.transform = `rotate(${data.coords.heading}deg)`;

Сегодня я узнал (Т-И-Л):

  • Создание собственного спидометра и компаса
  • Изменение стрелки изображения в соответствии с координатами!🙌

Это все на Day21 ✅

Спасибо за внимание.Увидимся завтра!