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

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

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

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

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

HTML Геолокация



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


Найдите позицию пользователя

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

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

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


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

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

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+"'>";
}
Редактор кода »

Скрипт карты Google
Как показать интерактивную карту Google с помощью маркера, масштабирования и перетаскивания.


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

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

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

  • Актуальная местная информация
  • Отображение достопримечательности интереса рядом с пользователем
  • Пошаговая навигация (GPS)

Метод getCurrentPosition () - возвращает данные

Метод getCurrentPosition() возвращает объект при успешном выполнении. Всегда возвращаются свойства широты, долготы. Другие свойства возвращаются, если они доступны:

Свойство Возврат
coords.latitude Широта, как десятичное число (всегда возвращается)
coords.longitude Долгота как десятичное число (всегда возвращается)
coords.accuracy Точность положения (всегда возвращается)
coords.altitude Высота в метрах над средним уровнем моря (возвращается при наличии)
coords.altitudeAccuracy Точность высоты положения (возвращается, если доступно)
coords.heading Заголовок в градусах по часовой стрелке от севера (возвращается при наличии)
coords.speed Скорость в метрах в секунду (возвращается при наличии)
timestamp Дата / время ответа (возвращается, если доступно)

Объект геолокации - другие интересные методы

Объект геолокации также имеет другие интересные методы:

  • watchPosition() - Возвращает текущее положение пользователя и продолжает возвращать обновленное положение по мере перемещения пользователя (например: GPS в автомобиле).
  • clearWatch() - Останавливает метод watchPosition().

Пример ниже показывает метод watchPosition(). Вам нужно точное устройство GPS, чтобы проверить это (например: iPhone):

Пример

<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>
Редактор кода »