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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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>
Редактор кода »