Здравствуйте, уважаемые читатели XoZbloga! В этом уроке Вы узнаете, как можно определить географическое местоположение (координаты) посетителя сайта с помощью Geolocation API от консорциума W3C. А для наглядности по этим координатам укажем точное (ну или примерно точное :)) положение на Google Maps.
Как это работает?!
Данные геолокации могут быть получены из различных источников. Традиционно на веб-сайтах, геолокация определяться по IP-адресу посетителя. Также набирает популярность способ определения географического положения через GPS. Многие мобильные устройства имеют такой чип, что позволяет достаточно точно, вплоть до нескольких метров, определять положение объекта. Все это привело к росту популярности сервисов использующих геолокацию пользователя.
Использование геолокации
Наиболее обширно геолокация используется в рекламе. Многие бренды пользуются этим и выдают подходящие рекламные блоки именно для той местности, в которой находится пользователь. Google, Яндекс (кстати, для размещения рекламы в Яндекс воспользуйтесь бид директом) и другие поисковые системы также пользуются определением местоположения пользователя и выдают соответствующие результаты поиска. Исключением не стали и социальные сети, которые позволяют познакомится с людьми находящимися поблизости и тд.
Хватит «ходить вокруг, да около» переходим к делу.
HTML разметка
Как уже говорилось в начале урока, с помощью API определим точные координаты и отразим их на карте Google.
В центр страницы добавляем блок div (#map) для карты. В этот div также добавляем текстовое предупреждение, и анимационную картинку, которая отобразится когда пользователь нажмет на кнопку. Под всей этой конструкцией расположена кнопка для запуска определения геолокации, а сразу под кнопкой блоки для отображения числовых координат (долгота и широта).
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="map"> <span class="helper">Нажмите на кнопку ниже, чтобы определить свое местоположение</span> <img id="preloader" src="images/257.gif"> </div> <a class="button" href="" title="">Определить местоположение</a> <div id="results"> <span class="longitude"></span><br> <span class="lattitude"></span><br> <span class="location"></span> </div> |
Классы CSS описывать не буду, дабы не тратить время. Переходим к определению местоположения.
jQuery
Для удобства кодирования использовать будем jQuery. После того как будут определены координаты в плавающий фрейм поместим карту. Для начала, давайте определим необходимые переменные:
1 2 3 4 5 | var button = $('.button'); var preloader = $('#preloader'); var longitudediv = $('.longitude'); var lattitudediv = $('.lattitude'); var locationdiv = $('.location'); |
Теперь необходимо провести проверку поддерживает ли браузер пользователя API Geolocation.
1 2 3 4 5 6 7 8 9 10 11 | if (navigator.geolocation) { button.click(function(e) { e.preventDefault(); preloader.show(); navigator.geolocation.getCurrentPosition(exportPosition, errorPosition); }); } else { alert('Ваш браузер не поддерживает Geolocation API'); } |
API строится вокруг свойства geolocation глобального объекта navigator. Если браузер не поддерживаем API показываем оповещение, иначе отслеживаем нажатие на кнопку определения местоположения.
Как только кнопка была нажата показываем прелоадер и вызываем метод getCurrentPosition, в качестве методов обратного вызова, используются функции exportPosition — если пользователь соглашается передать данные о своем положении или в настройках браузера уже выставлены такие разрешения, а при отказе errorPosition.
Функция отказа:
1 2 3 4 | function errorPosition() { alert('К сожалению не удалось определить Ваше местоположение'); pretext.show(); } |
Оповещаем пользователя и показываем первоначальный блок с информацией.
«Успешная» функция — exportPosition вызывается с одним параметром, это объект position с двумя свойствами: coords и timestamp. Первое содержит свойства, latitude (широта) и longitude (долгота), а второе время когда было произведено вычисление.
Как только получим координаты можем использовать их в коде Iframe Embed от Google Maps. Таким образом функция exportPosition выглядит так:
1 2 3 4 5 6 7 8 9 10 11 | function exportPosition(position) { // Получаем координаты и помещаем в переменные latitude = position.coords.latitude; longitude = position.coords.longitude; // Вставляем Google Maps Iframe и с координатами $('#map').html('<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&ll='+latitude+','+longitude+'&spn=0.332359,0.617294&t=m&z=11&output=embed"></iframe>'); longitudediv.html('Долгота: '+longitude); lattitudediv.html('Широта: '+latitude); // --- Продолжение ---- |
Вы наверняка заметили, что координаты мы передаем в URL ‘+latitude+’ и ‘+longitude+’.
Результатом всего этого будет карта с указанием положения на ней пользователя. Последнее, что мы сделаем так это укажем еще название местности. Для этого мы сделаем вызов Google Maps API через AJAX запрос. Все это в функции exportPosition (продолжение):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Вызываем Google Maps API и получаем название места $.ajax({ url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true', type: 'POST', dataType: 'json', success: function(data) { // В случаи успешного вызова locationdiv.html('Положение: '+data.results[0].address_components[2].long_name); }, error: function(xhr, textStatus, errorThrown) { errorPosition(); } }); } |
Если по каким-либо причинам, произошла ошибка то вызывается errorPosition и предупреждает пользователя.
Geolocation API работает во всех современных браузерах. Стоит также заметить, что исходники этого урока работают только на веб-сервере.
Не забывайте оставлять комментарии к статьям и урокам. Спасибо!
Источник статьи/урока: https://xozblog.ru
По материалам: http://webdesign.tutsplus.com/tutorials/ux-tutorials/making-websites-location-aware-with-html5-geolocation/