HTML5 Геолокація
API геолокації HTML використовується для місцезнаходження користувача.
Знайдіть позицію користувача
API геолокації HTML використовується для отримання географічного положення користувача.
Оскільки це може порушити конфіденційність, позиція недоступна доти, доки користувач не погодиться з цим.
Примітка: Геолокація є найбільш точною для пристроїв з GPS, таких як смартфон.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, що повністю підтримує геолокацію.
| API | |||||
|---|---|---|---|---|---|
| Геолокація | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Примітка: Починаючи з Chrome 50, API Геолокація буде працювати лише при безпечному з'єднанні, такому як HTTPS. Якщо ваш сайт розміщений на незахищеному джерелі (наприклад, HTTP), запити на місцезнаходження користувачів більше не функціонуватимуть.
Використання HTML Геолокації
Метод getCurrentPosition() використовується для повернення позиції користувача.
Наведений нижче приклад повертає широту та довготу позиції користувача:
Приклад
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Геолокація не підтримується цим браузером.";
}
}
function showPosition(position) {
x.innerHTML = "Широта: " + position.coords.latitude +
"<br>Довгота: " + position.coords.longitude;
}
</script>
Спробуйте самі »
Пояснення прикладу:
- Перевіряємо, чи геолокація підтримується;
- Якщо підтримується, запускаємо метод getCurrentPosition(). Якщо ні, то відображаємо повідомлення користувачу;
- Якщо метод getCurrentPosition() успішний, він повертає об'єкт координат до функції, зазначеної у параметрі (showPosition);
- Функція showPosition() виводить широту та довготу.
Наведений вище приклад є дуже простим базовим скриптом геолокації без обробки помилок.
Обробка помилок та відмов
Інший параметр методу getCurrentPosition() використовується для обробки помилок. Він визначає функцію для запуску, якщо не вдалося отримати місцезнаходження користувача:
Приклад
function showError(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;
}
}
Спробуйте самі »
Відображення результату на карті
Щоб відобразити результат на карті, потрібен доступ до сервісу карт, наприклад, до Карт Google.
У наведеному нижче прикладі повернута широта та довгота використовуються для відображення місцезнаходження на карті Google (за допомогою статичного зображення):
Приклад
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Інформація щодо місцезнаходження
На цій сторінці показано, як відобразити позицію користувача на карті.
Геолокація також дуже корисна для конкретної інформації про місцезнаходження, наприклад:
- Актуальна місцева інформація;
- Відображення цікавих місць біля користувача;
- Покрокова навігація (GPS).
Метод getCurrentPosition() - повернення даних
Метод getCurrentPosition() повертає об'єкт у разі успіху. Властивості широти, довготи та точності завжди повертаються. Інші властивості повертаються, якщо доступні:
| Властивість | Повертає |
|---|---|
| coords.latitude | Широта як десяткове число (завжди повертається) |
| coords.longitude | Довгота як десяткове число (завжди повертається) |
| coords.accuracy | Точність позиції (завжди повертається) |
| coords.altitude | Висота в метрах вище за середній рівень моря (повертається, якщо є) |
| coords.altitudeAccuracy | Точність позиції висоти (повертається, якщо доступна) |
| coords.heading | Напрямок у градусах за годинниковою стрілкою від Півночі (повертається, якщо доступний) |
| coords.speed | Швидкість за метри за секунду (повертається, якщо доступно) |
| timestamp | Дата/час відповіді (повертається, якщо доступно) |
Об'єкт геолокації - інші цікаві методи
Об'єкт геолокації - також інші цікаві методи:
watchPosition()- Повертає поточну позицію користувача та продовжує повертати оновлену позицію, коли користувач переміщується (наприклад, GPS в автомобілі).clearWatch()- зупиняє методwatchPosition().
Наведений нижче приклад показує метод watchPosition(). Для тестування потрібен точний пристрій GPS (наприклад, смартфон):
Приклад
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Геолокація не підтримується цим браузером.";
}
}
function showPosition(position) {
x.innerHTML = "Широта: " + position.coords.latitude +
"<br>Довгота: " + position.coords.longitude;
}
</script>
Спробуйте самі »
