Геолокация — одна из важнейших особенностей современного Интернета. Такие приложения, как Google Maps, Tinder и Yelp, зависят от геолокации, чтобы предоставлять своим пользователям релевантные данные в зависимости от их текущего (или меняющегося) местоположения. Рекламодатели используют геолокацию для показа объявлений о ближайших компаниях или предстоящих мероприятиях «в вашем районе».
Долгое время получение данных о местоположении пользователя означало либо запрос какой-либо идентифицирующей информации (буквальный адрес, почтовый индекс, город и т. д.) через форму, либо использование IP-адресов для определения того, откуда пользователь подключается, что было сложным процессом. Gems позволили людям включить геолокацию в свои приложения, но в большинстве случаев данные о местоположении, которые вы получали от пользователей, варьировались от расплывчатых до совершенно неверных. Введите HTML5.
HTML5 изменил способ получения разработчиками данных о местоположении пользователя, включив собственный объект Geolocation, доступ к которому можно получить, запустив Navigator.geolocation в любом месте ваших файлов javascript. Этот объект реагирует на две чрезвычайно полезные функции, включая getCurrentPosition(), которая получает текущее местоположение пользователя по широте и долготе (а также высоту, направление и скорость, если они доступны), и watchPosition(). , который, как следует из названия, возвращает текущую позицию пользователя и «следует» за ним, возвращая каждую обновленную позицию по мере перемещения пользователя, пока не будет вызвана clearWatch(). Кроме того, настроить геолокацию на своей странице очень просто.
Давайте создадим простую веб-страницу, которая возвращает им позицию пользователей. Я собираюсь создать простой заголовок, а также пустой тег ‹p›, который я заполню долготой и широтой, как только они будут загружены (геолокация может нужно немного времени).
<h1> You are Here </h1> <p id="latLon"></p>
Для геолокации HTML5 требуется JavaScript (я буду использовать jQuery), поэтому мы откроем несколько тегов ‹script› и напишем внутри несколько функций, чтобы получить наши координаты и отобразить их. Мы собираемся определить переменную для созданного нами тега ‹p›, что немного облегчит его заполнение.
Выше мы использовали две пользовательские функции: showPosition() и анонимную функцию, запускаемую при загрузке документа.
Анонимная функция вызывает объект Geolocation и использует метод getCurrentPosition, который возвращает положение пользователя по широте и долготе. В нашей функции он передает это как аргумент «позиция» нашей функции showPosition()обратного вызова, которая затем вызывает coords.latitude и coords.longitude, чтобы изменить innerHTML нашего пустого тега ‹p› на значения долготы и широты.
(Рекомендуется включать некоторый «резервный контент», определяя оператор if/else, который вызывает ваш объект геолокации. Хотя геолокация хорошо поддерживается современными браузерами, старые браузеры не смогут получить данные о местоположении. очевидно, лучше включить какое-то предупреждение или объяснение, чем ничего не происходит на вашей странице.)
Когда эта страница загружается, мы видим следующее:
В этом примере мы просто отображаем долготу и широту для пользователя, но данные о местоположении пользователя можно использовать для запросов к API, отображения местоположения пользователя на карте или любых творческих вещей.
Так как же работает геолокация HTML5? В отличие от большинства гемов, которые отслеживают IP-адрес, используемый для подключения к странице или приложению, и сверяют его с базой данных интернет-провайдера, нативная геолокация либо использует GPS, встроенный в большинство «компьютеров» (имеется в виду ноутбук, настольный компьютер, или мобильные устройства) или пингует все беспроводные сети, доступные для устройства, обращающегося к странице, предоставляя ему гораздо более глубокий пул данных, из которого можно определить местоположение.
Важное заключительное примечание: обмен данными о местоположении не включен по умолчанию для мобильных устройств или браузеров; многие из нас знакомы с уведомлением «Такое-то приложение хочет получить доступ к вашему местоположению», которое появляется при первом открытии приложений на нашем iPhone, и аналогичное уведомление появляется в браузере при первом доступе пользователя к любой странице, которая попытки геолокации. Пользователи должны дать свое разрешение, прежде чем данные о местоположении будут переданы, поэтому не думайте, что только потому, что вы запускаете эти функции, вы автоматически получаете данные.
Кроме того, Chrome 50 позволяет передавать данные о местоположении только в том случае, если пользователь делает HTTPS-запрос в качестве дополнительной функции безопасности. Еще одна вещь, о которой следует помнить при использовании встроенной геолокации.
