HTML Геолокація API
Geolocation API використовується для отримання поточного місцезнаходження користувача.
Визначення місцезнаходження користувача
Геолокація API використовується для доступу до поточного місцезнаходження користувача.
Оскільки це може порушити конфіденційність, місцезнаходження недоступне, доки користувач не схвалить запит.
Примітка: Geolocation API доступний лише в безпечних контекстах, таких як HTTPS.
Порада: Geolocation API є найточнішим на пристроях із GPS, таких як смартфони або смартгодинники.
Підтримка браузерів
Числа в таблиці вказують першу версію браузера, яка повністю підтримує Geolocation.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 | 12.0 | 3.5 | 5.0 | 10.6 |
Використання HTML Geolocation API
Доступ до Geolocation API здійснюється через виклик navigator.geolocation. Це змусить браузер запитати в користувача дозвіл на доступ до його даних про місцезнаходження. Якщо користувач погодиться, браузер шукатиме найкращу доступну функціональність на пристрої для отримання цієї інформації (наприклад, GPS).
Метод getCurrentPosition() використовується для повернення поточного місцезнаходження користувача.
Наведений нижче приклад повертає широту та довготу поточного місцезнаходження користувача:
Приклад
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Геолокація не підтримується цим браузером.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error() {
alert("На жаль, місцезнаходження недоступне.");
}
</script>
Спробуйте самі »
Пояснення прикладу:
- Перевірити, чи підтримується Geolocation
- Якщо Geolocation підтримується — виконати метод
getCurrentPosition(). Якщо ні — показати користувачу повідомлення - Функція success() виводить місцезнаходження користувача у вигляді широти та довготи
- Функція error() показує текстове попередження, якщо браузер отримує помилку в
getCurrentPosition()
Обробка помилок і відхилень
Другий параметр методу getCurrentPosition() використовується для обробки помилок. Він визначає функцію, яку буде виконано, якщо не вдасться отримати місцезнаходження користувача.
Ось приклад більш детальної обробки помилок:
Приклад
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Спробуйте самі »
Інформація, прив’язана до місцезнаходження
Geolocation також дуже корисний для інформації, прив’язаної до місця, наприклад:
- Актуальна локальна інформація
- Показ точок інтересу поруч із користувачем
- Покрокова навігація (GPS)
Метод getCurrentPosition() — Повернення даних
Метод getCurrentPosition() повертає об’єкт у разі успіху. Властивості latitude, longitude та accuracy повертаються завжди. Інші властивості повертаються, якщо доступні:
| Властивість | Поверне |
|---|---|
| coords.latitude | Широта у вигляді десяткового числа (повертається завжди) |
| coords.longitude | Довгота у вигляді десяткового числа (повертається завжди) |
| coords.accuracy | Точність визначення позиції (повертається завжди) |
| coords.altitude | Висота в метрах над рівнем моря (повертається, якщо доступно) |
| coords.altitudeAccuracy | Точність визначення висоти (повертається, якщо доступно) |
| coords.heading | Напрямок у градусах за годинниковою стрілкою від Півночі (повертається, якщо доступно) |
| coords.speed | Швидкість у метрах за секунду (повертається, якщо доступно) |
| timestamp | Дата/час відповіді (повертається, якщо доступно) |
Об’єкт Geolocation — Інші цікаві методи
Об’єкт Geolocation також має інші цікаві методи:
watchPosition()— повертає поточне місцезнаходження користувача та продовжує повертати оновлені дані під час руху (як GPS у автомобілі).clearWatch()— зупиняє методwatchPosition().
Наведений нижче приклад демонструє метод watchPosition(). Для тестування потрібен точний GPS‑пристрій (наприклад, смартфон):
Приклад
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Геолокація не підтримується цим браузером.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Користувач відхилив запит на геолокацію."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Інформація про місцезнаходження недоступна."
break;
case error.TIMEOUT:
x.innerHTML = "Час очікування запиту на отримання місцезнаходження користувача минув."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Сталася невідома помилка."
break;
}
}
</script>
Спробуйте самі »
