С помощью 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 не поддерживается."); }
После выполнение данного кода мы увидим окно с координатами и точность определение местоположения в метрах.
Давайте немного улучшаем наш код.
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. Посмотрим как можно вывести местоположение пользователя на карту и как можно нарисовать маршруты.
Комментарии