Узнаем местонахождение пользователя в HTML5
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое Canvas в HTML5. В данной статье я бы хотел рассказать о том, как определить местонахождение пользователя с помощью объекта geolocation в HTML5. Запрос на получение местонахождения является сугубо личной информацией, поэтому перед тем, как данный запрос будет обработан, пользователь должен вручную разрешить обработку данных. На мобильных устройствах координаты местонахождения определяются гораздо точнее, потому что там встроен GPS приемник. На компьютерах тоже может быть GPS приемник, но если его нет, то координаты определяются путем анализа IP-адреса, что конечно же менее точно. Давайте определим местонахождение пользователя. Данная возможность реализуется методом getCurrentPosition() объекта geolocation:
<!DOCTYPE html5>
<html>
<head>
<title>Геолокация в HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(showPosition, showErrors);
function showPosition(position) {
document.write("Время определения местоположения= " + position.timestamp + "</br");
document.write("Широта пользователя = " + position.coords.latitude + "</br");
document.write("Долгота пользователя = " + position.coords.longitude + "</br");
document.write("Высота над уровнем моря = " + position.coords.altitude + "</br");
document.write("Скорость, с которой вы двигаетесь = " + position.coords.speed + "</br");
document.write("Вы движетесь под углом = " + position.coords.heading + "</br");
document.write("Точность определения местоположения (в метрах) = " + position.coords.accuracy + "</br");
}
function showErrors(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("Пользователь запретил считывание информации о местоположении.");
break;
case error.POSITION_UNAVAILABLE:
alert("К сожалению браузер не смог определить местоположение.");
break;
case error.TIMEOUT:
alert("За определенное время браузер не смог определить местоположение.");
break;
case error.UNKNOWN_ERROR:
alert("Возникла неизвестная ошибка.");
break;
}
}
</script>
</body>
</html>
Давайте разбираться в том, что здесь написано. У метода getCurrenPosition() есть несколько аргументов. В качестве первого аргумента передаётся имя функции, которая вызывается при успешном считывании местоположения. В качестве второго аргумента передаётся имя функции, которая вызывается в случае, если координаты определить не удалось. В данном примере указаны все ошибки, которые могут возникнуть. Здесь с помощью конструкции switch case мы проверяем код ошибки, и в зависимости от ошибки выводим сообщение пользователю (это как раз и есть описание данных ошибок).
Если координаты были успешно получены, то в функцию (в нашем случае showPosition) передаётся объект (мы его назвали position), который содержит свойства timestamp и coords. Timestamp возвращает время определения местоположения.
coords содержит другие свойства, описание которых видно из примера. Скажу только про свойство heading. Результат возвращается в градусах, т.е. если вы перемещаетесь на север, то результатом будет 0, если на запад 270, на восток — 90, на юг — 180. Думаю, вы поняли. Широту и долготу ещё можно определить на компьютере, но вот результат работы других свойств нужно тестировать на мобильном устройстве с поддержкой GPS.
Свойство accuracy возвращает точность определения местонахождения. Допустим, результат работы данного свойства равен 1000. Это означает, что пользователь находится в радиусе 1 км от определенного местонахождения.
У метода getCurrentPosition() есть третий параметр, который устанавливает некоторые параметры для определения местонахождения. Пример:
navigator.geolocation.getCurrentPosition(showPosition, showErrors,
{enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000});
Свойство enableHighAccuracy используется, чтобы определить координаты с высокой точностью. По умолчанию false. Сильно расходует батарею, без сильной нужды не использовать. На стационарных компьютерах без поддержки GPS бесполезно.
Свойство timeout задаёт количество времени, которое можно потратить на определение местонахождения. Задаётся в миллисекундах. В нашем примере на определение местонахождения можно потратить 10 секунд. Если за это время не удалось определить местонахождение, то вернется ошибка TIMEOUT. По умолчанию стоит значение 0. Это означает, что сколько нужно времени для определения — столько и будет затрачено.
Свойство maximumAge разрешает кэширование данных. В нашем примере кэшированными данными можно пользоваться в течении минуты.
Как же определить поддерживает ли браузер пользователя данный функционал? Можно написать такой код:
if (!navigator.geolocation) {
document.write("К сожалению ваш браузер не поддерживает геолокацию. Обновите его!!!");
}
В данной статье вы узнали об объекте geolocation в HTML5.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
