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 для сенсорів орієнтації.

автор: Bond правити

Порада

Якщо розробляєте додаток для роботи в транспорті, передбачте обмеження на частоту запитів до watchPosition() для зниження навантаження на систему та зменшення витрат батареї.

автор: Bond правити

Порада

Оновлення даних про heading може бути затриманим, тому в реальних додатках краще використовувати watchPosition() замість getCurrentPosition(), особливо якщо користувач рухається швидко.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

position.coords.heading

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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("Пристрій не рухається або напрямок недоступний.");
  }
});

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("Значення напрямку недоступне, пристрій нерухомий.");
  }
});