🗊Презентация Геолокация в HTML5

геолокация в HTML5

История HTML5

Основы геолокации IP-локация Триангуляция: Wi-Fi Вышки сотовой связи GPS

IP локация Преимущества Имеет широкое применение Выполняется на стороне сервера Недостатки Низкая точность Высокая стоимость

GPS Преимущества Высокая точность Высокоэффективная в сельской местности Недостатки Затруднена работа в помещении Затруднена работа в многоэтажной застройке Длительное получение резултатов

Wi-fi Приемущества Высокая точность Работа внутри помещений Высокая скорость Недостатки Недостаточная точность в сельской местности

Сотовая связь Преимущества Хорошая точность Работа внутри помещениий Высокая скорость Недостатки Требуется доступ к устройству с мобильной связью Низкая точность в сельской местности

Поддержка Geolocation API

Защита личной информации

Основные функции API Проверка поддержки - navigator.geolocation Запрос позиции – void getCurrentPosition(successCallBack, [errorCallBack], [Options]) Аттрибуты enableHighAccuracy timeout maximumAge getCurrentPosition(UpdatePosition, HandleError, {timeout:10000}); function UpdatePosition(position); function HandleError(error);

Обработка ошибок Функция обработки ошибок принимает параметр error. Возможные значения параметра: UNKNOW_ERROR (код ошибки 0) PERMISSION_DENIED (код ошибки 1) POSITION_UNAVAILABLE (код ошибки 2) TIMEOUT (код ошибки 3)

ПРИМЕР кода function start() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(UpdateLocation, ErrorHandle) } else { alert('You browser do not support Geolocation API!'); } } function UpdateLocation(position) { document.getElementById('longitude').innerHTML = position.coords.longitude; document.getElementById('latitude').innerHTML = position.coords.latitude; document.getElementById('accuracy').innerHTML = position.coords.accuracy; } function ErrorHandle(error) { switch(error.code) { case 0: document.getElementById('error').innerHTML = 'Unknown error'; break; case 1: document.getElementById('error').innerHTML = 'Denied by user'; break; case 2: document.getElementById('error').innerHTML = 'Cannot retrive position'; break; case 3: document.getElementById('error').innerHTML = 'Timeout'; break; } }

Пример работы

использованные источники http://evolutionofweb.appspot.com http://caniuse.com http://maps.yandex.ru Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов