Геолокация

Веб-программирование --- HTML5 --- Геолокация

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

Все основные браузеры предоставляют хороший уровень поддержки геолокации:

Большинство новых возможностей JavaScript, которые мы рассмотрели ранее, были частью первоначальной спецификации HTML5, а потом были отделены, когда спецификацию передали в ведение организации W3C. Но геолокация никогда не была частью HTML5, а просто полностью сформировалась приблизительно в то же самое время. Но почти все рассматривают эту возможность вместе с возможностями HTML5, как часть одной большой волны будущих технологий.

Принцип работы геолокации

Возможность геолокации вызывает довольно много вопросов у людей, которых обычно нельзя назвать параноиками. Например, каким образом может какое-то программное обеспечение знать, что я не болею, как я сказал своему начальнику, а смотрю футбол в кафе? В нем что, есть какой-то скрытый код, который отслеживает все мои действия? Интересно, что это за фургон там на улице и те люди, которые прикидываются, будто бы они меняют колесо?

К счастью, возможность геолокации не из разряда страшилок о слежке. Это потому, что даже если браузер может вычислить ваше местонахождение, он не сообщит его веб-сайту без вашего явного на то разрешения:

Веб-страница хочет получить данные о местоположении посетителя. Посетитель может разрешить предоставлять эти данные или же не предоставлять их. Такое поведение браузера Chrome не является собственной инициативой его разработчиков, а официальным правилом стандарта геолокации, требующим, чтобы каждый веб-сайт, пытающийся получить данные о местоположении посетителя, получил для этого его разрешение.

Чтобы вычислить местоположение посетителя, браузер заручается помощью поставщика услуг определения местоположения (location provider), например, для Chrome это сервис Google Location Services. Определение местоположения является задачей не из легких, и поставщик применяет несколько разных подходов для ее решения.

В случае настольного компьютера с фиксированным (т.е. небеспроводным) подключением, метод простой, но дает не очень точные результаты. Когда кто-то подключается к интернету, данные с его компьютера или локальной сети направляются (через кабель, выделенную линию или коммутируемое телефонное соединение) на мощное сетевое аппаратное устройство, которое, в свою очередь, направляет их в интернет. Это аппаратное устройство имеет однозначный IP-адрес, т.е. числовой код, который идентифицирует это устройство для других участников сети. Это устройство также имеет физический почтовый адрес.

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

Тем не менее часто даже такие неточные результаты являются полезными. Например, если вы используете средство геолокации, чтобы найти магазин, продающий пиццу на вынос, вы можете быстро перейти в район, который вас действительно интересует — вблизи вашего дома — даже если вы находитесь не совсем рядом.

Метод определения местоположения посредством IP-адреса является самым неточным способом геолокации. Если имеется лучший источник данных, поставщик местоположения будет использовать этот источник.

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

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

Наконец, многие мобильные устройства оснащены специальными аппаратными средствами GPS (Global Positioning Service - глобальная система навигации и определения положения), что позволяет определять местоположение таких устройств с точностью всего лишь до нескольких метров. Но этот метод геолокации имеет свой недостаток — он медленнее и потребляет больше энергии, что важно для устройств, работающих на аккумуляторах. Кроме этого, он не особенно хорошо работает в городах с большими и высокими зданиями по причине отражения сигнала от строений.

Конечно же, возможны и другие способы определения местоположения. Ничто не препятствует поставщику местоположения использовать для этого другие источники информации, такие как данные от RFID-устройств (Radio Frequency Identification - радиочастотная идентификация), данные от устройств Bluetooth, файлы cookies с информацией от картографического сайта наподобие Google Maps и т.п.

Из всего этого можно сделать следующий вывод: независимо от способа подключения к интернету, даже если посетитель веб-сайта сидит за настольным компьютером, возможность геолокации позволяет определить его местонахождение с большей или меньшей точностью. А если он выходит в интернет с мобильного телефона или с устройства, оснащенного аппаратным обеспечением GPS, его местоположение может быть определено с точностью скорее большей, чем меньшей.

В каких сферах применять геолокацию?

Ответив на большой вопрос, как работает геолокация, нам нужно разобраться еще с одним: какая нам от нее польза?

Здесь ключевым аспектом, который нужно понимать, является то, что функциональность геолокации позволяет определить приблизительные географические координаты посетителя страницы. И это все. Веб-разработчик должен объединить эту простую, но важную информацию с более подробными данными о местоположении посетителя. Эти данные можно получить от веб-сервера (обычно из огромной серверной базы данных) или какой-либо географической веб-службы (скажем, Google Maps).

Например, для большого предприятия, имеющего филиалы в нескольких точках, может потребоваться сравнить местоположение посетителя веб-страницы с местоположением своих разных филиалов, чтобы определить ближайший к посетителю.

А разработчик какого-либо средства социальных сетей может создать диаграмму расположения группы пользователей, показывающую им расстояние между ними. Или же данные о местонахождении можно использовать для предоставления посетителям веб-сайта какой-либо услуги, например нахождения ближайшего работающего круглосуточно магазина или кафе. В любом случае, информация о местоположении посетителя веб-страницы важна только в комбинации с другими географическими данными.

Хотя картографические и географические услуги, предоставляемые другими компаниями, довольно обширны, мы рассмотрим одну из них — Google Maps — чуть позже.

Определение координат посетителя

Возможность геолокации предельно проста. Она состоит из трех методов объекта navigator.geolocation: getCurrentPosition(), watchPosition() и clearWatch().

Объект navigator — это сравнительно незначительная часть JavaScript. Его несколько свойств предоставляют информацию о текущем браузере и его возможностях. Наиболее полезным из них является свойство navigator.userAgent, которое предоставляет информационную строку, содержащую подробные данные о браузере, его версии, а также операционной системы, в которой он выполняется.

Для получения местоположения посетителя вызывается метод getCurrentPosition(). Но следует понимать, что процесс определения местоположения занимает определенное время, в течение которого никакой уважающий себя браузер не остановит всю деятельность на странице, пока ожидает эти данные. Поэтому метод getCurrentPosition() исполняется асинхронно, т.е. после его запуска продолжается выполнение следующего за ним кода. Когда определение местоположения завершится, для обработки результатов активируется другой фрагмент кода.

Можно ожидать, что завершение определения местоположения сопровождается извещением, во многом подобном тому, как сообщается об окончании загрузки изображения или чтения текстового файла. Но язык JavaScript можно назвать каким угодно, но только не последовательным. И при вызове метода getCurrentPosition() ему передается функция завершения (completion function).

Далее приведен пример вызова этого метода:

navigator.geolocation.getCurrentPosition(
    function(position) {
	    alert('Последний раз вас засекали здесь: ' +
		    position.coords.latitude + ", " + position.coords.longitude);
	}
);

При исполнении этот код вызывает метод getCurrentPosition() и передает ему функцию. Когда браузер завершит процесс определения местоположения, он активирует эту функцию, которая выводит окно сообщения:

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

Определение точности предоставленного местоположения

При успешном выполнении метода getCurrentPosition() код получает объект position, который имеет два свойства: timestamp (содержит время выполнения геолокации) и coords (содержит географические координаты).

Но свойство coords в свою очередь является подобъектом объекта position и кроме свойств latitude и longitude, определяющих географические координаты посетителя, имеет еще несколько других свойств, предоставляющих дополнительную информацию о местоположении. Это такие свойства, как altitude (высота над уровнем моря), heading (направление движения) и speed (скорость). Но на данный момент эти свойства не поддерживаются ни одним браузером.

Более интересным является свойство accuracy, которое указывает точность определенного местоположения в метрах. (Это означает, что по мере понижения точности данных местоположения значение свойства accuracy возрастает, что может несколько сбивать с толку.) Например, значение свойства accuracy, равное 2135 метрам, означает, что местоположение пользователя было определено в пределах этого расстояния.

Свойство accuracy полезно для определения качества результатов геолокации. Например, если значение свойства accuracy измеряется десятками километров, данные геолокации вряд ли имеют какую-либо практическую ценность:

if (position.coords.accuracy > 10000) {
		alert('Посетитель может быть где угодно на карте');	
}

В таком случае, возможно, разумно известить пользователя о неопределенных данных его местоположения и/или предложить ему ввести правильную информацию самому.

Обработка ошибок

Функциональность геолокации не срабатывает, если посетитель отказывается дать разрешение на ее применение. В таком случае функция завершения в нашем примере не вызывается и страница не будет знать, то ли браузер все еще пытается определить местоположение или же произошла ошибка в исполнении кода.

Для решения этой проблемы при вызове метода getCurrentPosition() ему нужно передавать не одну функцию, а две. Первая функция, как мы уже рассмотрели, вызывается в случае успешного завершения процесса геолокации. В противном же случае вызывается вторая функция. Далее приведен пример с использованием этих двух функций:

// Сохраняем элемент в котором страница отображает результат
var result;

window.onload = function() {
    result = document.getElementById('result');
	
	// Если функциональность геолокации доступна, 
	// пытаемся определить координаты посетителя
	if (navigator.geolocation) {
		// Передаем две функции
		navigator.geolocation.getCurrentPosition(
		            geolocationSuccess, geolocationFailure);
		
		// Выводим результат
		result.innerHTML = "Поиск начался";
	}
	else {
		// Выводим результат
		result.innerHTML = "Ваш браузер не поддерживает геолокацию";
	}
}

function geolocationSuccess(position) {
	result.innerHTML = "Последний раз вас засекали здесь: " +
	         position.coords.latitude + ", " + position.coords.longitude;
}

function geolocationFailure(positionError) {
	result.innerHTML = "Ошибка геолокации";
}

При вызове функции ошибки геолокации браузер передает ей объект ошибки, который имеет два свойства: code (содержит числовой код, указывающий один из четырех типов ошибки) и message (содержит короткое извещение о проблеме). Обычно извещение предназначено для тестирования, а код ошибки используется кодом функции для определения, каким образом решать данную проблему.

Модифицированная функция ошибки, которая проверяет все возможные значения кода ошибки, выглядит так:

function geolocationFailure(positionError) {
	if(positionError == 1) {
		result.innerHTML = "Вы решили не предоставлять данные о своем местоположении, " + 
		        "но это не проблема. Мы больше не будем запрашивать их у вас.";
	}
	else if(positionError == 2) {
		result.innerHTML = "Проблемы с сетью или нельзя связаться со службой определения " + 
		        "местоположения по каким-либо другим причинам.";
	}
	else if(positionError == 3) {
		result.innerHTML = "He удалось определить местоположение " 
		        + "в течение установленного времени. ";

	}
	else {
		result.innerHTML = "Загадочная ошибка.";
	}
}

Установка параметров геолокации

Итак, мы рассмотрели, как вызывать метод getCurrentPosition() с двумя параметрами: функцией для обработки успеха геолокации и функцией для обработки ошибки при попытке ее выполнения. Но этому методу можно передавать еще один параметр, коим является объект, устанавливающий определенные параметры геолокации.

В настоящее время можно установить три параметра, каждый из которых соответствует отдельному свойству объекта параметров геолокации. В следующем примере устанавливается один параметр enableHighAccuracy:

navigator.geolocation.getCurrentPosition(
		    geolocationSuccess, geolocationFailure, {enableHighAccuracy: true});

А в этом примере устанавливаются все три параметра:

navigator.geolocation.getCurrentPosition(
		    geolocationSuccess, geolocationFailure, 
			{enableHighAccuracy: true,
			 timeout: 10000,
			 maximumAge: 60000});

В обоих этих примерах параметры геолокации устанавливаются посредством литералов объектов JavaScript.

Что же означают эти свойства? Свойство enableHighAccuracy задействует высокоточное определение местоположения, используя систему GPS (если устройство поддерживает эту возможность и посетитель разрешил ее использование). Не устанавливайте этот параметр, если только вам не требуется получить точные координаты, т.к. ее применение сильно повышает расход заряда аккумулятора устройства браузера. По умолчанию свойству enableHighAccuracy присваивается значение false.

Свойство timeout определяет период времени, в течение которого страница будет ожидать получения данных геолокации, прежде чем считать попытку неудачной.

Значения timeout устанавливается в миллисекундах, т.е. 10 000 мс означает максимальное ожидание 10 с. Отсчет начинается после того, как пользователь согласится предоставить данные геолокации. По умолчанию свойству timeout присваивается 0, означающий, что страница будет ожидать результаты геолокации бесконечно, не активируя ошибку тайм-аута.

Свойство maximumAge позволяет кэширование данных о местоположении. Например, значение maximumAge, равное 60 000 мс, разрешает пользоваться данными геолокации, полученными минуту назад. Это позволяет сэкономить время и вычислительные ресурсы, а также означает, что результаты геолокации будут менее точными, если посетитель перемещается. По умолчанию свойству maximumAge присваивается 0, означающий, что кэшированные результаты геолокации никогда не используются. Свойству можно также присвоить специальное значение infinity, в этом случае будут использоваться кэшированные данные геолокации любой давности.

Отображение карты

Определение географических координат местоположения посетителя веб-сайта — конечно же, интересный трюк. Но он быстро утрачивает свою привлекательность, если мы не найдем этой информации какое-либо полезное применение. За этим дело не станет, т.к. в интернете имеются целые россыпи данных географического местоположения. (Часто проблемой является преобразование этой информации в формат, полезный для веб-приложения.)

Кроме того, существует несколько картографических сервисов, неоспоримым лидером которых является Google Maps. Надежные оценки обращений к этой службе дают основания полагать, что Google Maps является наиболее используемым веб-приложением для любых целей.

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

Служба Google Maps предоставляет свои услуги на бесплатной основе (даже для коммерческих сайтов) при условии бесплатного доступа к сайту. (Для платных сайтов Google предоставляет платный картографический сервис.) В настоящее время Google Maps не вставляет свою рекламу на сайты, пользующиеся ее услугами, но лицензионные условия явно оговаривают право на это в будущем.

На рисунке ниже показана модифицированная версия страницы геолокации. Здесь полученные географические координаты пользователя служат для отображения его местоположения на карте:

Создание такой страницы не представляет никаких сложностей. Первым делом нам нужна ссылка на сценарии интерфейса API Google Maps. Эта ссылка размещается перед всеми блоками сценариев, которые используют функциональность картографии:

<head>
   <meta charset="utf-8">
   <title>Геолокация</title>
   <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
   ...
</head>

Далее нам будет нужен элемент <div> для размещения динамически создаваемой карты. Для удобства обращения к этому элементу присваиваем ему однозначный идентификатор:

<body>
   <p id="result">Где вы живете?</p>
   <div id="mapSurface"></div>
</body>

Размер карты можно определить с помощью правила таблицы стилей:

#mapSurface {
    width: 600px;
    height: 400px;
    border: solid 1px black;
}

Теперь все готово к использованию функциональностей, предоставляемых Google Maps. Первым делом нужно создать поверхность карты. В этом примере карта создается при загрузке страницы, чтобы ее можно было использовать в функциях успеха или ошибки геолокации. (В конце концов, ошибка геолокации означает всего лишь то, что страница не может определить текущее местоположение пользователя. В таком случае все равно имеет смысл отображать карту, но только центрировать ее относительно точки с координатами по умолчанию.)

Далее приведен код, исполняемый при загрузке страницы. Сначала он создает карту, а потом пытается определить местоположение посетителя:

var results;
var map;

window.onload = function() {
    result = document.getElementById('result');
	
	// Устанавливаем некоторые параметры карты. В данном примере 
	// устанавливаются начальный уровень масштабирования и тип карты. 
	// Информацию о других параметрах см. в документации по Google Maps.
	var myOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	
	// Создаем карту, используя установленные выше параметры
	map = new google.maps.Map(document.getElementById("mapSurface"), myOptions);
	
	// Пытаемся определить местоположение пользователя
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
		            geolocationSuccess, geolocationFailure);

		result.innerHTML = "Поиск завершен";
	}
	else {
		result.innerHTML = "Ваш браузер не поддерживает геолокацию";
		goToDefaultLocation();
	}
}

Но созданная этим кодом карта еще не отображается на странице, т.к. еще не установлена географическая позиция. Для этого нужно создать специфическую глобальную точку, используя объект LatLng, которая потом помещается на карту посредством метода setCenter() карты. Далее приведен код, который выполняет все эти действия для координат посетителя:

function geolocationSuccess(position) {
	// Преобразуем местоположение в объект LatLng
	var location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
	
	// Отображаем эту точку на карте
	map.setCenter(location);
}

Этого кода будет достаточно для отображения карты наподобие показанной на рисунке выше. Но к этой базовой карте можно добавить разные примочки, например отображение других мест во врезке или же всплывающее информационное окно. Последнее создается с помощью объекта infoWindow. Далее приведен код для создания и отображения всплывающего информационного окна (как на рисунке выше):

function geolocationSuccess(position) {
	
    ...
	
	// Создаем всплывающее информационное окно и устанавливаем
	// его текст и положение на карте.
	var infowindow = new google.maps.InfoWindow();
	infowindow.setContent("Вы находитесь где-то в этом районе.");
	infowindow.setPosition(location);
	
	// Отображаем всплывающее окно
	infowindow.open(map);

	results.innerHTML = "Местоположение отмечено на карте.";
}

Наконец, в случае ошибки геолокации или отсутствия ее поддержки в браузере посетителя можно выполнить, по сути, те же действия, но используя альтернативные предустановленные координаты вместо координат посетителя:

function geolocationFailure(positionError) {
	...
	goToDefaultLocation();
}

function goToDefaultLocation() {
	// Примерные координаты центра Москвы
	var moscow = new google.maps.LatLng(55.753878,37.649275);
	map.setCenter(moscow);
}

Отслеживание перемещений посетителя

Во всех рассмотренных нами до сих пор примерах мы использовали метод getCurrentPosition(), являющийся ключевой функциональностью геолокации. Но объект geolocation имеет еще два других метода, которые позволяют отслеживать перемещения посетителя и извещать страницу об этих перемещениях.

Первым из этих методов является метод watchPosition() который в значительной степени похож на метод getCurrentPosition(). Подобно методу getCurrentPosition(), метод watchPosition() принимает параметры: функцию успеха (единственный обязательный параметр) и функцию ошибки:

navigator.geolocation.watchPosition(
		geolocationSuccess, geolocationFailure);

Разница между этими двумя методами состоит в том, что метод watchPosition() может активировать функцию успеха неоднократно — по определению местоположения в первый раз, а потом каждый раз, когда он обнаруживает новое местоположение. Для настольных компьютеров, которые никогда не перемещаются, методы getCurrentPosition() и watchPosition() имеют абсолютно одинаковый эффект.

Но в отличие от метода getCurrentPosition() метод watchPosition() возвращает число. Это число можно сохранить и передать методу clearWatch(), чтобы прекратить отслеживать перемещения:

var watch = navigator.geolocation.watchPosition(
		geolocationSuccess, geolocationFailure);
   ...
navigator.geolocation.clearWatch(watch);

Этот шаг можно не выполнять и продолжать получать сообщения о перемещениях до тех пор, пока посетитель не покинет страницу.