Определение местоположения с помощью API Geolocation


Зачем это нужно? Для начала что бы была возможность управлять информацией на странице для пользователей из конкретных мест.

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

Итак один из вариантов определить где находится пользователь это спросить его через HTML5 Geolocation ( Современные браузеры поддерживают этот функционал, а мобильные устройства с чипом GPS/ГЛОНАСС еще и максимально точно могут указать конкретное место)


Важно!

Если вы столкнулись с тем что у вас в Google Chrome не работает API Geolocation то знайте что начиная с версии 50 API Geolocation работает только если сайт доступен по HTTPS.
Зачем это сделали не знаю, может корпорация добра таким образом решила озаботится неприкосновенностью частной жизни. В общем если вы хотите что бы в Chrome работала Geolocation то настраивайте работу сайта по защищенному протоколу HTTPS.
(Как получить SSL сертификат для сайта бесплатно)

Для начала определяем поддерживает ли браузер данный функционал

if(navigator.geolocation){
    alert('Ваш браузер поддерживает Geolocation API'); 
}else{
    alert('Ваш браузер не поддерживает Geolocation API'); 
}

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

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(
	function(position) {
	    alert('Вы находитесь где то тут: ' + position.coords.latitude + ", " + position.coords.longitude);
          }
     ); 
}else{
    alert('Ваш браузер не поддерживает Geolocation API'); 
}

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

Получив координаты мы при помощи корпорации добра можем узнать где же это находится

$.ajax({
     url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true',
     type: 'POST',
     dataType: 'json',
     success: function(data) {
          // В случаи успешного вызова
        alert('Вы находитесь: '+data.results[0].address_components[3].long_name)
     },error: function(xhr, textStatus, errorThrown) {
          errorPosition();
     }
   });

Как дальше это использовать завит от конкретных задач, но вот если пользователь отказался передавать вам свое местоположение то тут остается только обратится к GeoIP для определения приблизительного метаположения основываясь на базах данных где есть погрешность.

#js #Geolocation

Copyright © 2019