API геолокации в HTML

HTML API Geolocation

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

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

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

Примечание: Geolocation API работает только в защищённых контекстах, таких как HTTPS. Совет: Наиболее точен на устройствах с GPS, например смартфонах или смарт-часах.

Поддержка браузерами

Geolocation поддерживается всеми современными браузерами (начиная с Chrome 5, Edge 12, Firefox 3.5, Safari 5 и Opera 10.6).

Использование HTML Geolocation API

Geolocation API доступен через navigator.geolocation, что заставляет браузер запросить у пользователя разрешение на доступ к его местоположению. Если пользователь соглашается, браузер использует лучшую доступную возможность устройства (например, GPS). Метод getCurrentPosition() возвращает текущее местоположение пользователя.

Пример проверяет, поддерживается ли геолокация, и если да, запускает getCurrentPosition(); иначе показывает сообщение. Функция успеха выводит широту и долготу, а функция ошибки показывает сообщение при сбое.

Пример

Отображение широты и долготы пользователя.

Страница с кнопкой, которая при нажатии использует метод getCurrentPosition из Geolocation API, чтобы показать широту и долготу пользователя в абзаце, с запасным сообщением, если геолокация не поддерживается, и предупреждением (alert) при ошибке.

> Результат: полная HTML-страница

Prompt

Страница с кнопкой, которая при нажатии использует метод getCurrentPosition из Geolocation API, чтобы показать широту и долготу пользователя в абзаце, с запасным сообщением, если геолокация не поддерживается, и предупреждением (alert) при ошибке.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовая геолокация</title>
</head>
<body>

<p>Нажмите кнопку, чтобы получить свои координаты.</p>

<button onclick="getLocation()">Попробовать</button>

<p id="demo"></p>

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

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

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

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

</body>
</html>

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

Второй параметр getCurrentPosition() обрабатывает ошибки; он задаёт функцию, которая запускается при неудачном получении местоположения. Можно проверить error.code для конкретного сообщения, обрабатывая случаи PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT и UNKNOWN_ERROR.

Пример

Геолокация с подробными сообщениями об ошибках.

Страница, похожая на базовую демонстрацию геолокации, но с подробной обработкой ошибок: callback ошибки проверяет error.code и показывает конкретное сообщение для PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT и UNKNOWN_ERROR.

> Результат: полная HTML-страница

Prompt

Страница, похожая на базовую демонстрацию геолокации, но с подробной обработкой ошибок: callback ошибки проверяет error.code и показывает конкретное сообщение для PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT и UNKNOWN_ERROR.

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обработка ошибок</title>
</head>
<body>

<p>Нажмите кнопку, чтобы получить свои координаты.</p>

<button onclick="getLocation()">Попробовать</button>

<p id="demo"></p>

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

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

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>

</body>
</html>

Информация, зависящая от местоположения

Геолокация полезна для информации, зависящей от местоположения, например актуальной локальной информации, показа интересных мест рядом с пользователем и пошаговой GPS-навигации.

Метод getCurrentPosition() - Возвращаемые данные

При успехе getCurrentPosition() возвращает объект. Он всегда возвращает coords.latitude, coords.longitude и coords.accuracy. Остальные возвращаются только при доступности: coords.altitude (высота над уровнем моря в метрах), coords.altitudeAccuracy, coords.heading (градусы по часовой стрелке от севера), coords.speed (метры в секунду) и timestamp (дата и время ответа).

Объект Geolocation - Другие интересные методы

У объекта Geolocation есть и другие методы: watchPosition() возвращает текущее местоположение и продолжает возвращать обновления по мере перемещения пользователя (как GPS в автомобиле), а clearWatch() останавливает watchPosition(). Для тестирования watchPosition() нужно точное GPS-устройство, например смартфон.

Пример

Непрерывное отслеживание местоположения пользователя с помощью watchPosition().

Страница, использующая метод watchPosition из Geolocation для непрерывного отображения обновляемых широты и долготы пользователя по мере его перемещения, с той же подробной обработкой ошибок (лучше всего тестировать на устройстве с GPS).

> Результат: полная HTML-страница

Prompt

Страница, использующая метод watchPosition из Geolocation для непрерывного отображения обновляемых широты и долготы пользователя по мере его перемещения, с той же подробной обработкой ошибок (лучше всего тестировать на устройстве с GPS).

Результат: полная HTML-страница

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отслеживание позиции</title>
</head>
<body>

<p>Нажмите кнопку, чтобы начать отслеживание своих координат.</p>

<button onclick="getLocation()">Попробовать</button>

<p id="demo"></p>

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

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

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>

</body>
</html>