Войти
s-lub » Учебники » HTML 5 » Геолокация в HTML 5

Геолокация в HTML 5

Геолокация в HTML 5

С приходом HTML 5 у разработчиков сайтов появилась возможность определять примерное местоположение пользователей посещающих их сайты и даже настраивать определённые функции сайта в зависимости от местоположения их посетителей, это наиболее полезно для интернет – магазинов, теперь они могут в автоматическом режиме предлагать свой товар в зависимости от города или региона потенциального покупателя.

Стоит учитывать, что информация о местоположении может нарушать конфиденциальность, прежде чем сервер сможет получить данную информацию пользователь должен явным образом подтвердить, что не имеет возражений на этот счет.

Так же стоит учитывать, что координаты местоположения определяются более точно на мобильных устройствах, потому что они имеют свой собственный встроенный GPS приемник.

Настройка геолокации в HTML 5

Текущая позиция пользователя может быть определена с помощью метода getCurrentPosition() объекта navigator.geolocation.

- navigator.geolocation.getCurrentPosition(success_function, error_function, options);

- success_function - имя функции, которая будет вызвана в случае если координаты пользователя будут считаны удачно.

- error_function - имя функции, которая будет вызвана если при считывании координат произойдет ошибка.

- options - позволяет задать настройки, которые будут использованы при считывании координат.

Возможные значения:

- enableHighAccuracy - если имеет значение true браузер будет пытаться определить местоположение как можно точнее;

- timeout - устанавливает максимально допустимое время, которое браузер может использовать для считывания данных (по умолчанию время считывания не ограничено);

- maximumAge - как долго браузер будет хранить к кэше предыдущее сохраненное значение.

В случае если пользователь разрешил использовать данные о его местоположении и они были удачно считаны браузером. В функцию success_function в качестве параметра будет передан объект, который содержит свойство timestamp (содержит время считывание координат) и объект coords, который имеет следующие свойства:

- latitude и longitude - Широта и долгота местоположения пользователя

- altitude - Высота от уровня моря в метрах

- accuracy - Точность определения широты и долготы (чем больше число тем меньше точность)

- altitudeAccuracy - Точность определения высоты (чем больше число тем меньше точность)

- heading - Показывает направление пользователя в градусах (т.е. 0 градусов значит, что пользователь направляется на север, 180 на юг и т.д.).

- speed - Скорость перемещения в метрах в секунду

Пример

<script>
function getCoordinates() {
navigator.geolocation.getCurrentPosition(showCoordinates);
}

function showCoordinates(position) {
document.write('Широта: ' + position.coords.latitude + "<br />");
document.write('Долгота: ' + position.coords.longitude);
}
</script>

В случае если при считывании координат пользователя произошла какая-либо ошибка будет вызвана функция error_function. Возможные ошибки при считывании координат:

- PERMISSION_DENIED - Пользователь запретил считывать информацию о его местоположении.

- POSITION_UNAVAILABLE - Браузер не может определить местоположение пользователя.

- TIMEOUT - Браузер не успел определить местоположение пользователя в выделенное ему время.

- UNKNOWN_ERROR - Во время определения местоположения произошла неизвестная ошибка.

Пример

<script>
function showError(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>

Отслеживание изменения местоположения

С помощью метода watchPosition() Вы можете считывать данные о месте положения пользователя через определенные интервалы времени. После запуска данный метод возвращает специальный индикатор, который может использоваться позднее для завершения считывания с помощью метода clearWatch().

Обратите внимание: чтобы увидеть как изменяются координаты во время перемещения мы рекомендуем тестировать данный пример на мобильных устройствах со встроенным GPS.

Пример

<script>
function getCoordinates() {
watchID = navigator.geolocation.watchPosition(showCoordinates);
}

function stop() {
if (watchID) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
</script>

На этом мы и закончили с геолокацией.


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas