HTML5. Геолокація

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



API геолокації HTML використовується для визначення місця розташування користувача.


Знайдіть позицію користувача

API геолокації HTML використовується для отримання географічного положення користувача.

Оскільки це може порушити конфіденційність, позиція недоступна до тих пір, поки користувач не схвалить її.

Примітка: Геолокація є найбільш точною для пристроїв з GPS, таких як смартфон.


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує геолокацію.

API
Geolocation 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 = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
Спробуйте самі »

Пояснення прикладу:

Наведений вище приклад є дуже простим базовим сценарієм геолокації без обробки помилок.


Обробка помилок і відмов

Другий параметр методу getCurrentPosition() використовується для обробки помилок. Він визначає функцію для запуску, якщо не вдалося отримати місцезнаходження користувача:

Приклад:

function showError(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;
  }
}
Спробуйте самі »

Відображення результату на карті

Щоб відобразити результат на карті, потрібен доступ до сервісу карт, наприклад, до Карт 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+"'>";
}
Спробуйте самі »

Інформація, що стосується місцезнаходження

На цій сторінці показано, як відобразити позицію користувача на карті.

Геолокація також дуже корисна для конкретної інформації про місцезнаходження, наприклад:


Метод getCurrentPosition() - повернення даних

Метод getCurrentPosition() повертає об'єкт у випадку успіху. Властивості широти, довготи та точності завжди повертаються. Інші властивості повертаються, якщо доступні:

Властивість Повернення
coords.latitude Широта як десяткове число (завжди повертається)
coords.longitude Довгота як десяткове число (завжди повертається)
coords.accuracy Точність позиції (завжди повертається)
coords.altitude Висота в метрах вище середнього рівня моря (повертається, якщо є)
coords.altitudeAccuracy Точність позиції висоти (повертається, якщо доступна)
coords.heading Напрямок в градусах за годинниковою стрілкою від Півночі (повертається, якщо доступно)
coords.speed Швидкість у метрах в секунду (повертається, якщо доступно)
timestamp Дата/час відповіді (повертається, якщо доступно)

Об'єкт геолокації - інші цікаві методи

Об'єкт геолокації також має інші цікаві методи:

Наведений нижче приклад показує метод watchPosition(). Для тестування потрібний точний пристрій GPS (наприклад, смартфон):

Приклад:

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>
Спробуйте самі »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.