Статьи

HTML5 Geo Location

Функция геолокации HTML позволяет вашему веб-приложению определять географическое положение посетителей вашего сайта. Географическое положение на самом деле не является частью спецификации HTML5, но, поскольку HTML5 стал фактической меткой для всех новых функций в HTML и JavaScript, я включил географическое местоположение в это руководство по HTML5.

Вот список затронутых тем:

Безопасность и конфиденциальность

Пользователь должен признать, что ваш сайт получает доступ к их местоположению через диалоговое окно браузера, поэтому вы не можете использовать его для слежки за вашими посетителями без их ведома.

Доступ к географическому местоположению

Доступ к географическому местоположению осуществляется через JavaScript, через объект navigator.geolocation в браузере. Объект геолокации позволяет получить доступ к геолокации с помощью двух основных функций:

  1. getCurrentPosition ()
  2. watchPosition ()

Функция getCurrentPosition () возвращает местоположение посетителя в виде одноразового снимка. Функция watchPosition () возвращает местоположение посетителя каждый раз, когда оно изменяется. Это происходит путем вызова заданных функций обратного или успешного вызова при каждом изменении позиции.

Обе функции принимают следующие параметры:

  • Функция обратного вызова
  • Функция обратного вызова ошибки (необязательно)
  • Объект опций географического местоположения (необязательно)

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

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
);

Чтобы попробовать пример, нажмите эту кнопку:

Географическое положение получается асинхронно. Это означает, что когда вы вызываете getCurrentPosition () или watchPosition (), функции возвращаются немедленно. Когда браузер знает местоположение пользователя, и пользователь принял, что веб-сайт может получить доступ к географическому местоположению, вызывается функция обратного вызова успеха. Если возникает ошибка, вместо нее вызывается функция обратного вызова.

Объект Положение

Объект позиции, переданный в функцию обратного вызова success, выглядит следующим образом:

double latitude         // read only attribute
double longitude        // read only attribute
double accuracy         // read only attribute

double altitude         // read only attribute
double altitudeAccuracy // read only attribute
double heading          // read only attribute
double speed            // read only attribute

Свойства широты и долготы содержат географические координаты позиции. Свойство точности содержит точность местоположения в метрах. Чем ниже точность, тем точнее местоположение.

Высота над уровнем моря, точность над уровнем моря, курс и скорость доступны только в том случае, если на устройстве с браузером встроен GPS. В противном случае эти свойства устанавливаются в нуль.

Свойство altitude содержит высоту пользователя. Точность высоты содержит точность в метрах высоты. Свойство heading указывает направление движения пользователя. Значение указывается в градусах (0-360) относительно истинного севера. Свойство speed содержит скорость пользователя в метрах в секунду, если она доступна.

скорость

Свойство speed имеет значение только в том случае, если вы используете метод watchPosition (). Браузеру, по-видимому, нужно несколько позиций для расчета скорости.

Функция обратного вызова ошибок

Если получить географическое местоположение пользователя не удается, будет вызвана функция обратного вызова ошибки, переданная либо getCurrentPosition (), либо watchPosition (). Невозможность получить географическое местоположение может привести к сбою по следующим причинам:

  • Пользователь отказывает сайту в доступе к географическому местоположению.
  • Устройство, на котором запущен браузер, не может получить географическое местоположение, например, если оно находится в туннеле, под землей и т. Д., Где спутниковые сигналы GPS не могут быть получены.
  • Устройство слишком долго о получении позиции, и время ожидания вызова.

Функция обратного вызова ошибки получает объект с двумя свойствами, например:

short     code    // unsigned read only attribute.
DOMString message // read only attribute.

Значение атрибута кода будет одним из:

  • 1, что означает PERMISSION_DENIED
  • 2, что означает POSSITION_UNAVAILABLE
  • 3, что означает время ожидания

Атрибут сообщения содержит текстовое описание ошибки. Эта ошибка может быть полезна для разработчика, но не имеет большого смысла для пользователя веб-сайта.

Объект опций географического местоположения

Функции getCurrentPosition () и watchPosition () могут принимать объект параметров географического местоположения в качестве третьего параметра. Этот объект параметров может содержать следующие свойства:

    enableHighAccuracy     // true or false
    timeout                // milliseconds
    maximumAge             // milliseconds

Свойство enableHighAccuracy может иметь значение true или false. Значение true указывает браузеру, что если устройство, на котором запущен браузер, имеет GPS, его следует включить. Имейте в виду, что GPS потребляет много энергии, поэтому не включайте его, если это не необходимо с высокой точностью.

Свойство timeout сообщает браузеру, сколько времени ждать при попытке получить позицию, прежде чем истечет время ожидания и вызовет функцию обратного вызова с ошибкой вместо функции обратного вызова success.

Атрибут maximumAge сообщает браузеру максимальный возраст в миллисекундах кэшированного местоположения, который будет принимать ваше приложение. Значение 0 означает, что браузер должен получать новое местоположение при каждом вызове функции обратного вызова.

Полный пример

Вот пример кода, который использует как обработчик обратного вызова, обработчик обратного вызова с ошибкой, так и объект параметров:

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
    ,
    function(errorObject) {
        alert("Error obtaining position");
    }
    ,
    {
      enableHighAccuracy : true,
      timeout    : 3000,
      maximumAge : 60000
    }
);