Дополнительные Web API

Geolocation API

С помощью 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>