САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветHTML с CSSHTML СсылкиHTML ИзображениеHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

HTML Формы

HTML ФормыHTML Элементы вводаHTML Типы вводаHTML Атрибуты вводаHTML Атрибуты форм ввода

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

HTML ПримерыHTML ТестированиеHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL КодировкаHTML Коды языкаHTTP СообщенияHTTP МетодыPX в EM конвертерКлавишные комбинации

HTML5 Геолокация API



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


Найдите положение пользователя

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

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

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


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

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

API
Геолокация 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 = "Геолокация не поддерживается этим браузером.";
  }
}

function showPosition(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "<br>Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »

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

  • Проверьте, поддерживается ли геолокация
  • Если поддерживается, запустите метод getCurrentPosition(). Если нет, отображается сообщение пользователю
  • Если метод getCurrentPosition() успешен, он возвращает объект координат функции, указанной в параметре (showPosition)
  • Функция 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 Maps.

В приведенном ниже примере возвращенные широта и долгота используются для отображения местоположения на карте 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+"'>";
}

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

На этой странице показано, как отобразить положение пользователя на карте.

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

  • Актуальная местная информация
  • Отображение точек интереса рядом с пользователем
  • Пошаговая навигация (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>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Геолокация не поддерживается этим браузером.";
  }
}
function showPosition(position) {
  x.innerHTML = "Широта: " + position.coords.latitude +
  "<br>Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »