Как узнать геолокацию: Geolocation API

Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition(), но есть и другие методы и свойства, которые могут пригодиться.

Методы Geolocation API

Метод getCurrentPosition() возвращает текущее местоположение устройства. Этот метод принимает до двух аргументов: обязательный обратный вызов в случае успеха и необязательный обратный вызов в случае ошибки.

В этом примере в случае успеха вызовется функция showPosition().

<button onclick="getLocation()">Get Location</button>
<p id="location"></p>

<script>
  function getLocation() {
    // Если геолокация поддерживается браузером
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      document.getElementById("location").innerHTML = "Геолокация не поддерживается.";
    }
  }

  function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    document.getElementById("location").innerHTML = "Широта: " + lat + "<br>Долгота: " + lon;
  }
</script>

Хороший браузер спросит, дать ли разрешение на доступ к геолокации:

Если вы разрешите доступ, то увидите примерно такую картинку:

Это и есть координаты — широта и долгота, возвращённые браузером.

В объекте coords есть и другие свойства. Например, latitude (широта), longitude (долгота), altitude (высота), accuracy (точность), altitudeAccuracy (точность высоты), heading (направление), speed (скорость).

Метод watchPosition() возвращает текущее местоположение устройства, если определит, что положение изменилось.

if ("geolocation" in navigator) {
    watchID = navigator.geolocation.watchPosition(showPosition, showError, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  });
}

Он аналогичен getCurrentPosition(), но постоянно отслеживает местоположение устройства и активирует обратный вызов при его изменении. Что-то такое может использоваться в беговых трекерах для отслеживания тренировок.

Метод clearWatch() удаляет наблюдение, установленное ранее с помощью watchPosition(). Добежали — выключили.

navigator.geolocation.clearWatch(watchID);

Совместимость

На момент написания статьи Geolocation API поддерживается в большинстве современных браузеров на компьютерах и смартфонах.

Как определить город по местоположению

Для определения города по местоположению, полученному из Geolocation API, вам потребуется использовать так называемое «обратное геокодирование».

Обратное геокодирование — это процесс преобразования географических координат (широты и долготы) в адреса или другие читаемые данные о местоположении.

API для обратного геокодирования есть у разных сервисов — Google Maps Geocoding API, OpenStreetMap, Яндекс Геокодер API и других. Они могут быть платными или бесплатными, но с ограничениями, так что обратите внимание при подключении.

Полезности

• Geolocation API — Спецификация W3C
• MDN Web Docs — Использование Geolocation API

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.