JS властивість Geolocation.heading

Загальний опис

Властивість heading в об'єкті GeolocationCoordinates дозволяє отримати інформацію про напрямок руху пристрою в градусах відносно географічної Півночі, де 0° відповідає Півночі, 90° – Сходу, 180° – Півдню і 270° – Заходу. Властивість доступна тільки тоді, коли пристрій переміщується, інакше її значення буде null.

Це значення може бути корисним у додатках, які потребують інформації про поточний напрямок руху користувача, наприклад, у навігаційних програмах. Для отримання heading необхідно викликати метод navigator.geolocation.getCurrentPosition() або navigator.geolocation.watchPosition(), після чого використовувати position.coords.heading.

navigator.geolocation.getCurrentPosition((position) => {
  const heading = position.coords.heading;
  console.log("Напрямок руху: " + heading);
});

Якщо значення heading є null, це може означати, що пристрій нерухомий, а також можливі інші обмеження, пов'язані із самим пристроєм або умовами навколишнього середовища (наприклад, GPS може бути недоступним у приміщенні). Використання heading дозволяє контролювати не тільки місцезнаходження користувача, а й орієнтацію його руху, що може бути дуже корисним у логістиці, на транспорті та при розробці картографічних сервісів.

Для безперервного відстеження heading при русі використовують метод watchPosition(), який буде оновлювати положення та напрямок пристрою в реальному часі.

navigator.geolocation.watchPosition((position) => {
  if (position.coords.heading !== null) {
    console.log("Напрямок руху: " + position.coords.heading + " градусів");
  } else {
    console.log("Пристрій не рухається.");
  }
});

У випадку відсутності значення heading програмісти можуть використати альтернативні методи для розрахунку напрямку, наприклад, обчислюючи зміну положення по осі X і Y між двома послідовними точками, проте такий підхід менш точний і складніший у реалізації.

Порада:	Значення `heading` – це не абсолютний компас, а показник напряму руху відносно Півночі, який працює тільки при активному русі. Якщо потрібно враховувати також орієнтацію пристрою, використовуйте API для сенсорів орієнтації.
Порада:	Якщо розробляєте додаток для роботи в транспорті, передбачте обмеження на частоту запитів до `watchPosition()` для зниження навантаження на систему та зменшення витрат батареї.
Порада:	Оновлення даних про `heading` може бути затриманим, тому в реальних додатках краще використовувати `watchPosition()` замість `getCurrentPosition()`, особливо якщо користувач рухається швидко.

Синтаксис

position.coords.heading

Значення

Return

Переглядачі

Переглядач
	5	3.5	5	16	12

Переглядач
	37	18	4	3

Переглядач
	-	-

Приклади

Цей приклад демонструє, як за допомогою JavaScript API геолокації можна отримати напрямок руху користувача з властивості heading, яка відображає напрямок його переміщення в градусах (відносно півночі). Користувач натискає кнопку, щоб розпочати відстеження свого напрямку. Інтерфейс дозволяє йому бачити оновлення напряму в реальному часі. Після натискання кнопки ще раз, відстеження можна зупинити. Це корисно для таких застосунків, як навігаційні системи або трекери активності, де важливо знати напрямок руху користувача.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/jOgRGOv">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей код відстежує напрямок, в якому рухається користувач, і виводить повідомлення про напрямок залежно від його значення. Це може бути корисним для велосипедного додатку, який попереджає користувача, якщо він відхиляється від маршруту.

navigator.geolocation.watchPosition((position) => {
  const heading = position.coords.heading;
  if (heading !== null) {
    if (heading >= 45 && heading <= 135) {
      console.log("Рухаєтесь на Схід");
    } else if (heading > 135 && heading <= 225) {
      console.log("Рухаєтесь на Південь");
    } else if (heading > 225 && heading <= 315) {
      console.log("Рухаєтесь на Захід");
    } else {
      console.log("Рухаєтесь на Північ");
    }
  } else {
    console.log("Пристрій не рухається або напрямок недоступний.");
  }
});

У цьому прикладі watchPosition використовується для постійного оновлення напряму і видачі інформації про значні зміни напрямку. Це може стати в нагоді у навігаційних додатках, що попереджають водія при значному відхиленні від маршруту.

let lastHeading = null;

navigator.geolocation.watchPosition((position) => {
  const heading = position.coords.heading;
  if (heading !== null) {
    if (lastHeading === null || Math.abs(heading - lastHeading) > 20) {
      console.log(`Новий напрямок: ${heading} градусів`);
      lastHeading = heading;
    }
  } else {
    console.log("Значення напрямку недоступне, пристрій нерухомий.");
  }
});

JS довідник

JavaScript

Наповнення JS розділу