Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы HTML с JavaScript HTML Путь к файлу HTML Мета теги HTML Макет HTML Адаптивный дизайн HTML Компьютерный код HTML Семантика HTML Синтаксис HTML Сущность HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML Холст HTML 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 Canvas HTML Аудио/Видео HTML Типы документов HTML Наборы символов HTML URL Кодировка HTML Коды языка 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>
Попробуйте сами »