ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML учебник

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts


HTML5 Географического расположения


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 = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

Пример как работает:

  • Проверить, поддерживается ли геолокация
  • Если поддерживается, запустите метод getCurrentPosition (). Если нет, отобразите сообщение для пользователя
  • Если метод getCurrentPosition () успешен, он возвращает объект координат к функции, указанной в параметре (showPosition)
  • Функция showPosition () выводит широту и долготу

Приведенный выше пример является очень простым сценарием геолокации без обработки ошибок.



Обработка ошибок и отклонений

Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он задает функцию для запуска, если не удается получить расположение пользователя:

Пример

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Отображение результата на карте

Чтобы отобразить результат на карте, вам необходим доступ к картографическим сервисам, таким как карты Google.

В приведенном ниже примере возвращаемые Широта и Долгота используются для отображения местоположения в карте 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 = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>