Обработка событий датчиков и геолокация на JavaScript
Обработка событий датчиков положения на JavaScript
В одной из предыдущих статей мы рассмотрели обработку на JavaScript сенсорных экранов мобильных устройств. Сегодня продолжим тему взаимодействия web-страниц и приложений с мобильными устройствами и рассмотрим работу с различными датчиками, которые установлены в современных девайсах. Это датчики положения, перемещения, освещенности и приближения, а также модуль геопозиционирования.
Событие DeviceLightEvent предназначено для получения данных от датчика освещенности устройства, естественно, если ваше мобильное устройство им оборудовано. Само событие поддерживается только браузером Firefox, поэтому для кроссбраузерных задач использование этого события нежелательно.
Code (JavaScript) : Убрать нумерацию
- // Проверить доступность и назначить обработчик событий датчика освещенности
- if (window.DeviceLightEvent) {
- window.addEventListener('devicelight', light_hook, false);
- }
- else {
- // DeviceLightEvent не поддерживается
- }
- // Обработчик события DeviceLightEvent
- function light_hook(event) {
- // Уровень освещенности в люксах
- console.log('Light: '+ event.value);
- }
Code (JavaScript) : Убрать нумерацию
- // Проверить доступность и назначить обработчик событий датчика приближения
- if (window.DeviceProximityEvent) {
- window.addEventListener('deviceproximity', proximity_hook, false);
- }
- else {
- // DeviceProximityEvent не поддерживается
- }
- // Обработчик события DeviceProximityEvent
- function proximity_hook(event) {
- console.log('Proximity: '
- + 'value=' + event.value + ', '
- + 'min=' + event.min + ', '
- + 'max=' + event.max
- );
- }
Code (JavaScript) : Убрать нумерацию
- // Проверить доступность и назначить обработчик событий датчика-акселерометра
- if (window.DeviceMotionEvent) {
- window.addEventListener('devicemotion', motion_hook, false);
- }
- else {
- // DeviceMotionEvent не поддерживается
- }
- // Обработчик события DeviceMotionEvent
- function motion_hook(event) {
- console.log('Accelerometer: '
- + 'X=' + event.accelerationIncludingGravity.x
- + 'Y=' + event.accelerationIncludingGravity.y
- + 'Z=' + event.accelerationIncludingGravity.z
- );
- }
Code (JavaScript) : Убрать нумерацию
- // Проверить доступность и назначить обработчик событий датчика ориентации
- if (window.DeviceOrientationEvent) {
- window.addEventListener('deviceorientation', orientation_hook, false);
- }
- else {
- // DeviceOrientationEvent не поддерживается
- }
- // Обработчик события DeviceOrientationEvent
- function orientation_hook(event) {
- console.log('Magnetometer: '
- + 'alpha=' + event.alpha
- + 'beta=' + event.beta
- + 'gamma=' + event.gamma
- );
- }
Использование геолокации на JavaScript
В заключении осталось рассказать об использовании геолокации в мобильных приложениях. Область использования географических координат обширна, например, прокладка маршрутов до нужных объектов и оценка времени в пути, автоматическое определение региона пользователя для таргетированных предложений. Геолокацию поддерживают все современные браузеры, как стационарные, так и мобильные. Собрав воедино все основные методы и принципы работы с геопозиционированием, я нарисовал вот такой скрипт, который можно взять за основу в рабочих проектах. Обязательно учтите, что все обращения к модулю геопозиционирования выполняются асинхронно, поэтому все действия с полученными результатами выполняются только в callback-функциях.
Code (JavaScript) : Убрать нумерацию
- // Проверить поддержку геолокации
- if ('geolocation' in navigator) {
- // Идентификатор наблюдателя
- var watchID;
- // Получить координаты
- navigator.geolocation.getCurrentPosition(
- // Если удалось определить, то активировать наблюдателя
- function() {
- watchID = navigator.geolocation.watchPosition(
- // Обработчик геолокации
- geo_success,
- // Обработчик ошибок
- geo_error,
- // Дополнительные параметры
- {
- // Повышенная точность определения
- enableHighAccuracy : true,
- // Время кэширования результата
- maximumAge : 30000,
- // Время ожидания до генерации ошибки
- timeout : 20000
- }
- );
- },
- // Обработчик ошибок
- geo_error
- );
- }
- else {
- // Браузер не поддерживает геолокацию
- console.log('Geolocation is not supported');
- }
- // Обработчик геолокации
- function geo_success(position) {
- console.log(position.coords.latitude+' : '+position.coords.longitude);
- }
- // Обработчик ошибок
- function geo_error(error) {
- // Деактивировать наблюдателя
- navigator.geolocation.clearWatch(watchID);
- // Значения error.code:
- // 1 - User denied Geolocation
- // 2 - Unable to acquire location
- // 3 - Timeout expired
- console.log('ERROR (' + error.code + '): ' + error.message);
- }
На демонстрационной странице вы можете протестировать GPS-модуль вашего мобильного устройства на предмет взаимодействия с web-страницей. Полученные данные никуда не передаются и не собираются, так что можете смело разрешать передачу координат в браузере.
Просмотров: 6102 | Комментариев: 1
Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 34,352 раза
Поблагодарили 34,352 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 380 |
 |
 |
В случае если геолокация запрещена глобально - "Geolocation is not supported"
FF44.