heading в геолокації JS — напрямок руху в градусах
Загальний опис
Властивість 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 між двома послідовними точками, проте такий підхід менш точний і складніший у реалізації.
- Порада
-
Значення
автор: Bondheading– це не абсолютний компас, а показник напряму руху відносно Півночі, який працює тільки при активному русі. Якщо потрібно враховувати також орієнтацію пристрою, використовуйте API для сенсорів орієнтації. - Порада
-
Якщо розробляєте додаток для роботи в транспорті, передбачте обмеження на частоту запитів до
автор: BondwatchPosition()для зниження навантаження на систему та зменшення витрат батареї. - Порада
-
Оновлення даних про
автор: Bondheadingможе бути затриманим, тому в реальних додатках краще використовуватиwatchPosition()замістьgetCurrentPosition(), особливо якщо користувач рухається швидко.
Синтаксис
position.coords.headingПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 5 | 3.5 | 5 | 16 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як за допомогою JavaScript API геолокації можна отримати напрямок руху користувача з властивості heading, яка відображає напрямок його переміщення в градусах (відносно півночі). Користувач натискає кнопку, щоб розпочати відстеження свого напрямку. Інтерфейс дозволяє йому бачити оновлення напряму в реальному часі. Після натискання кнопки ще раз, відстеження можна зупинити. Це корисно для таких застосунків, як навігаційні системи або трекери активності, де важливо знати напрямок руху користувача.
HTML
<header>
<h2 class="title">Geolocation -> heading</h2>
<p class="description">Отримує напрямок руху користувача і відображає його на сторінці в реальному часі.</p>
</header>
<main>
<div class="result">
<button id="getHeadingBtn">Отримати напрямок руху</button>
<p id="headingOutput">Напрямок: не доступний</p>
<p>Оновлення напряму: <span id="updateInterval">1</span> сек.</p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p {
font-size: 18px;
color: #333;
}JS
let watchID = null;
// Функція для отримання напрямку руху
function startTracking() {
if (navigator.geolocation) {
// Використовуємо getCurrentPosition або watchPosition для постійного отримання оновлень
watchID = navigator.geolocation.watchPosition(function (position) {
// Отримуємо напрямок руху (в градусах відносно півночі)
const heading = position.coords.heading;
// Виводимо напрямок на екран
const headingElement = document.getElementById('headingOutput');
if (heading !== null) {
headingElement.textContent = `Напрямок: ${heading.toFixed(2)}°`;
} else {
headingElement.textContent = 'Напрямок: не визначено';
}
}, function (error) {
console.error('Помилка геолокації:', error);
}, {
enableHighAccuracy: true,
maximumAge: 0,
timeout: 5000 });
} else {
alert('Геолокація не підтримується цим браузером.');
}
}
// Функція для зупинки відстеження
function stopTracking() {
if (watchID !== null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// Додавання обробника для кнопки
document.getElementById('getHeadingBtn').addEventListener('click', function () {
if (watchID === null) {
startTracking();
this.textContent = 'Зупинити відстеження';
} else {
stopTracking();
this.textContent = 'Отримати напрямок руху';
}
});
//# sourceURL=pen.jsЦей код відстежує напрямок, в якому рухається користувач, і виводить повідомлення про напрямок залежно від його значення. Це може бути корисним для велосипедного додатку, який попереджає користувача, якщо він відхиляється від маршруту.
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("Значення напрямку недоступне, пристрій нерухомий.");
}
});Коментарі
Коментарів ще немає — будьте першим!