API геолокации Web

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

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

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

Попробуйте сами

Комментарий:Геолокация для устройств с GPS (например, смартфонов) наиболее точна.

Все браузеры поддерживают API Geolocation:

Chrome IE Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Комментарий:С Chrome 50 API Geolocation будет доступен только в безопасных контекстах, таких как HTTPS. Если ваш сайт хостится на небезопасном источнике (например, HTTP), запрос на получение местоположения пользователя больше не будет работать.

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

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

Ниже приведен пример, который возвращает широту и долготу местоположения пользователя:

Пример

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "Долгота: " + position.coords.longitude;
}
</script>

Попробуйте сами

Объяснение примера:

  1. Проверьте поддержку Geolocation
  2. Если метод поддерживается, запустите метод getCurrentPosition(). Если нет, покажите пользователю сообщение
  3. Если метод getCurrentPosition() успешен, он возвращает объект coordinates в функцию, указанную в параметре (showPosition)
  4. Функция 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) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let 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+"'>";
}

Информация, специфичная для местоположения

Эта страница демонстрирует, как показывать местоположение пользователя на карте.

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

  • Новые местные данные
  • Показывает интересующие пользователя объекты поблизости
  • Постепенная навигация (Turn-by-turn navigation) (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 устройство (например, смартфон):

Пример

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "Долгота: " + position.coords.longitude;
}
</script>

Попробуйте сами