С помощью Geolocation API мы можем получить в коде JavaScript данные о географическом положении пользователя. Для работы с Geolocation API
объект navigator
определяет свойство geolocation, которое представляет тип Geolocation.
Для получения положения у объекта Geolocation применяется метод getCurrentPosition():
getCurrentPosition(success) getCurrentPosition(success, error) getCurrentPosition(success, error, options)
Метод может принимать до трех параметров:
success
: функция, которая вызывается при успешном определении координат пользователя
error
: функция, которая вызывается при возникновении ошибки
options
: дополнительные параметры конфигурации
Поскольку позиция определяется асинхронно, то в качестве перевого параметра success
в метод передается функция обратного вызова,
которая вызывается, как только позиция будет успешно определена. В качестве параметра в эту функцию обратного вызова передается объект GeolocationPosition.
Его свойство coords
представляет тип GeolocationCoordinates
, свойства которого собственно и хранят координаты пользователя:
latitude
: географическая широта
longitude
: географическая долгота
altitude
: высота над уровнем моря в метрах
speed
: скорость, с которой перемещается пользователь (например, если он идет или перемещается на транспорте)
accuracy
: точность определения широты и долготы в метрах
altitudeAccuracy
: точность определения высоты над уровнем моря в метрах
heading
: куда направлено устройство пользователя.
0 градусов соответствует северу, а направление определяется по часовой стрелке (это означает, что восток равен 90 градусам, а запад — 270 градусам).
Если скорость (свойство speed
) равна 0, это свойство равно NaN. Если устройство не может предоставить информацию о направлении,
это свойство равно нулю.
Например, получим геоданные пользователя:
function success(position) { console.log("Широта: ", position.coords.latitude); console.log("Долгота: ", position.coords.longitude); console.log("Высота: ", position.coords.altitude); console.log("Скорость перемещения: ", position.coords.speed); console.log("Точность: ", position.coords.aaccuracy); console.log("Направление: ", position.coords.heading); }; navigator.geolocation.getCurrentPosition(success);
При этом надо учитывать, что в браузерах действует политика безопасности, которая при обращении к методу geolocation.getCurrentPosition()
отображает пользователю сообщение, в котором пользователь может подтвердить отправку географических координат.
Но если пользователь откажется предоставить доступ к геоданным в браузере, то будет срабатывать функция error
, которая передается в качестве второго параметра. Эта функция в качестве параметра принимает информацию об ошибке в виде объекта
GeolocationPositionError. Через свойство message
можно получить сообщение об ошибке. Кроме того через свойство code
можно получить код ошибки, который может принимать
следующие значения:
1
(PERMISSION_DENIED
): отсутствуют разрешения на получение геоданных
2
(POSITION_UNAVAILABLE
): не удалось установить позицию
3
(TIMEOUT
): допустимый таймаут истек до получения позиции пользователя
Применим обработчик ошибки:
function successHandler(position) { console.log("Широта: ", position.coords.latitude); console.log("Долгота: ", position.coords.longitude); }; function errorHandler(error) { console.log(error.message); // выводим сообщение об ошибке console.log(error.code); // выводим код ошибки } navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
И в случае, если разрешение на получение данных отсутствует, мы получим следующий консольный вывод:
User denied Geolocation 1
Метод watchPosition() объекта Geolocation
позволяет зарегистрировать функцию-обработчик, которая будет вызываться автоматически каждый раз при изменении положения устройства.
Этот метод принимает те же параметры, что и getCurrentPosition()
:
watchPosition(success) watchPosition(success, error) watchPosition(success, error, options)
В качестве результата метод возвращает идентификатор, который может быть передан методу clearWatch() объекта Geolocation для остановки отслеживания. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <button id="btn">Stop watching</button> <script> function successHandler(position) { console.log("Широта: ", position.coords.latitude); console.log("Долгота: ", position.coords.longitude); }; function errorHandler(error) { console.log(error.message); } const geolocation = navigator.geolocation; const watchID = geolocation.watchPosition(successHandler, errorHandler); // по нажатию на кнопку прекращаем отслеживание позиции document.getElementById("btn").addEventListener("click", ()=>geolocation.clearWatch(watchID)); </script> </body> </html>