HTML5 Geolocation API

HTML5 Geolocation API
4.7 (93.33%) 3 votes

С помощью HTML5 и JavaScript мы можем определить местоположение пользователя сайта или мобильного приложений, если он написан на языке программирования JavaScript. Это можно сделать с помощью HTML5 Geolocation API (HTML5 Геолокация).

В последних версиях современных браузеров доступен объект geolocation. Объект geolocation является свойством объекта navigator.
Мы можем проверить поддерживает браузер пользователя объект geolocation или нет.

if(navigator.geolocation) {
    alert("Объект Geolocation поддерживается.");
} else {
    alert("Объект Geolocation не поддерживается.");
}

Если у объекта navigator есть свойства geolocation, то при проверке условий он вернет true, в противном случае — false.

У объекта geolocation есть 3 метода:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

Но нас интересует метод getCurrentPosition(), и мы его будем использовать в данном уроке. С помощью метода getCurrentPosition() определяется местоположение пользователя.

Нужно учесть, что метод getCurrentPosition() выполняется асинхронно. Это означает, что в нашем коде после вызова метода getCurrentPosition() интерпретатор пойдет выполнить код дальше, не ожидая определение местоположение пользователя. Но нам как то нужно знать когда будет выполнена определение местоположение. И для этого мы можем передать в метод getCurrentPosition() callback функцию (функция обратного вызова).

Функция обратного вызова принимает один аргумент — position. В данном аргументе придет результат выполнения метода getCurrentPosition().

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position) {
        alert("OK");
    });
}else{
    alert("Объект Geolocation не поддерживается.");
}

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

После выполнение метода getCurrentPosition() в объект position придет два свойства — это timestamp и coords. свойства Свойства timestamp — это время определение местоположения пользователя в миллисекундах.

А в свойстве coords содержится в свою очередь свойства:

  • accuracy — точность (в метрах)
  • latitude — широта
  • longitude — долгота
if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function (position) {
    var latitude = position.coords.latitude; // широта
    var longitude = position.coords.longitude; // долгота
    var accuracy = position.coords.accuracy; // точность

    var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
    alert(result);
  });
}else{
  alert("Объект Geolocation не поддерживается.");
}

После выполнение данного кода мы увидим окно с координатами и точность определение местоположения в метрах.

Определение местоположение пользователя с помощью HTML5 и JavaScript

Давайте немного улучшаем наш код.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность
   var result = "широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success);
}

Мы вынесли переменные и вывод результата в отдельную функцию (success), которая принимает один параметр / аргумент — position, и данную функцию (ссылка на функцию) мы отдаем в метод getCurrentPosition(). Но это еще не все, мы не обработали ошибки.



В втором параметре метода getCurrentPosition() будет приходить код ошибки, если будет ошибка. Давайте создадим еще одну функцию, которая будет принимать один параметр — код ошибки и выводит пользователю сообщение об ошибке.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var result = " широта: " + latitude + "\n долгота: " + longitude + "\n точность: " + accuracy;
   alert(result);
}

// Обработка ошибок
function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения"; // Пользователь не дал разрешения на определение местоположения
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
  }

   alert(msg);
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

Если есть коды ошибок и значение по умолчанию, то мы можем сконфигурировать эти значение. Для этого мы можем передать третий аргумент в метод getCurrentPosition() — это некие настроечные параметры в виде объекта.

Параметры и значение по умолчанию:

  • enableHighAccuracy — по умолчанию false
  • timeout — по умолчанию 0 (ноль)
  • maximumAge — по умолчанию 0 (ноль)

enableHighAccuracy — Высокоточное определение местоположение пользователя (Обычно используется GPS, если есть). В основном это касается мобильных устройств.

timeout — Время запроса и ожидание на ответа. По умолчанию ноль, то есть он будет до бесконечности запрашивать, пока не получит ответ. Значение нужно передать в миллисекундах.

maximumAge — кэширование данных о местоположение пользвателя. Значение нужно передать в миллисекундах.

Любой из этих параметров мы можем передать в третий аргумента метода getCurrentPosition() как объект.

// тут наши функции ...

var params = {
   timeout: 10000,
   maximumAge: 60000
};

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error, params);
}

В втором уроке мы посмотрим как можно использовать Google Map API и Yandex Map API. Посмотрим как можно вывести местоположение пользователя на карту и как можно нарисовать маршруты.


Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python.

Комментарии