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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML 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 Конвертер Клавишные Комбинации

HTML Геолокация 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>
Попробуйте сами »