HTML API Геолокации

API геолокации используется для получения текущего местоположения пользователя.

---

Определение местоположения пользователя

API геолокации используется для доступа к текущему местоположению пользователя.

Поскольку это может поставить под угрозу конфиденциальность, доступ к местоположению предоставляется только с разрешения пользователя.

---

Поддержка в браузерах

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает API геолокации.

API
Геолокация	5.0	12.0	3.5	5.0	10.6

---

Использование HTML‑API геолокации

Доступ к API геолокации осуществляется с помощью вызова navigator.geolocation. Это приведёт к тому, что браузер запросит у пользователя разрешение на доступ к данным о его местоположении. Если пользователь даст согласие, браузер начнёт поиск наилучшего доступного способа получения этой информации на устройстве (например, GPS).

Метод getCurrentPosition() используется для возврата текущего местоположения пользователя.

В примере ниже возвращаются широта и долгота текущего местоположения пользователя:

Пример

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    x.innerHTML = "API геолокации не поддерживается этим браузером.";
  }
}

function success(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "<br>Долгота: " + position.coords.longitude;
}

function error() {
  alert("Извините, местоположение недоступно.");
}
</script>

Пояснение к примеру:

1. Проверяем, поддерживается ли API геолокации.
2. Если API геолокации поддерживается, запускается метод getCurrentPosition(). Если нет — пользователю отображается соответствующее сообщение.
3. Функция success() выводит местоположение пользователя в виде широты и долготы.
4. Функция error() отображает текстовое сообщение, если при вызове метода getCurrentPosition() возникает ошибка.

---

Обработка ошибок и отказов

Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он задаёт функцию, которая будет запущена, если не удалось получить местоположение пользователя.

Ниже приведён пример более детальной обработки ошибок:

Пример

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;
  }
}

---

Информация с привязкой к местоположению

Геолокация очень полезна для предоставления информации с привязкой к местоположению, например:

• актуальных местных сведений;
• отображения точек интереса рядом с пользователем;
• пошаговой навигации (с использованием 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>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(success, error);
  } else {
    x.innerHTML = "API геолокации не поддерживается этим браузером.";
  }
}

function success(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "<br>Долгота: " + 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>