Определение геолокации на сайте как сделать

Добавил пользователь Евгений Кузнецов
Обновлено: 10.09.2024

Забегая вперед, для нежелающих вникать в детали, готовый пример использования Geolocation API:

Geolocation API основывается на новом свойстве глобального объекта navigator — navigator.geolocation:

Указание атрибутов в третьем параметре - дело добровольное:

enableHighAccuracy. Значение true указывает браузеру попытаться получить как можно более точное значение данных о местоположении посетителя страницы сайта (широты, долготы и высоты); при этом, однако, процесс получения данных может потребовать больше времени, а энергопотребление компьютера может возрасти. Значение false этого параметра затребует у браузера обычные данные о местоположении, которые могут оказаться не очень точными. Значение по умолчанию - false.
timeout - задаёт таймаут, в течении которого должны быть получены данные о местоположении, в виде целого числа в миллисекундах. Если указать значение 0 или отрицательное значение, система должна сразу же выдать данные о местоположении; в противном случае возникнет ошибка. Если указать значение Infinity (математическая "плюс бесконечность"), на получение данных о местоположении будет отведено столько времени, сколько потребуется. Значение по умолчанию - Infinity.
maximumAge - задаёт таймаут, в течение которого полученные сведения о местоположении будут кэшироваться системой (таймаут кэширования). То есть, если мы запросим сведения о местоположении, а потом, пока таймаут кэширования ещё не истёк, сделаем это ещё раз, система вернёт нам кэшированные сведения. Кэширование данных о местоположении позволяет сэкономить энергию батарей в портативных компьютерах.
Значение этого таймаута указывается в виде целого числа в миллисекундах. Если указать значение 0 или отрицательное значение, система вообще не будет кэшировать данные о местоположении, а станет при каждом запросе получать их заново. Если же указать значение Infinity, данные о местоположении будут храниться в кэше всегда, и именно они будут возвращаться при запросе (например,вам нужно знать только город пользователя). Значение по умолчанию - 0 (то есть кэширование отключено).

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

Вызываемая функция получает один параметр — объект с двумя свойствами: coords и timestamp. Timestamp — это дата и время, при которых было произведено определение месторасположения. Определение этих свойств происходит асинхронно. Нельзя заранее предугадать когда точно это произойдет. Для пользователя это может означать некоторую задержку, потому что нужно сначала прочитать панель и убедится, что пользователь дал разрешение на определение координат, затем может потребоваться время на подключение GPS устройства к спутнику и так далее. Объект coords имеет свойства latitude (широта) и longitude (долгота) — это и есть информация о физическом положении на земном шаре. Свойства объекта приведены ниже:

Свойство	Тип	Примечание
coords.latitude	double	десятичные градусы
coords.longitude	double	десятичные градусы
coords.altitude	double или null	метров над референц-эллипсоидом
coords.accuracy	double	метры
coords.altitudeAccuracy	double или null	метры
coords.heading	double или null	градус по часовой стрелке относительно Северного полюса
coords.speed	double или null	метры/сек
timestamp	DOMTimeStamp	такой же как объект Date()

Гарантировано будут присутствовать только три свойства: coords.latitude, coords.longitude и coords.accuracy. Работоспособность остальных зависит от используемого пользователем устройства. Если данное свойство не поддерживается — вернется 0. Свойства heading и speed вычисляются на основании изменения положения пользователя, если, конечно, это возможно.

Второй аргумент для функции getCurrentPosition() для вызова обработчика ошибок:

Функция обработки ошибок с объектом PositionError, у которого имеются следующие свойства:

Свойство	Тип	Примечания
code	short	пронумерованные значения
message	DOMString	не предназначен для конечных пользователей

Свойство code принимает одно из следующих значений:

Функция getCurrentPosition() имеет необязательный третий аргумент, объект PositionOptions. Все свойства являются необязательными, вы можете задать любой, все или ни одного.

Объект PositionOptions

Свойство	Тип	Значение по умолчанию	Замечание
enableHighAccuracy	boolean	false	Если true, то медленнее
timeout	long	Нет	В миллисекундах
maximumAge	long	0	В миллисекундах

Свойство enableHighAccuracy делает именно то, как и звучит. Если оно установлено как true, устройство поддерживает свойство и пользователь соглашается указать свое местоположение, то устройство попытается обеспечить высокую точность. Оба телефона iPhone и Android имеют отдельные разрешения для низкой и высокой точности позиционирования, поэтому не исключено, что вызов getCurrentPosition() с enableHighAccuracy:true не получится, а вызов enableHighAccuracy:false удастся.

Свойство timeout это количество миллисекунд, которое веб-приложение будет ожидать для получения положения. Таймер не начинает отсчет, пока пользователь не даст разрешение на попытку вычислить его положение. Он следит не за пользователем, а за сетью.

Свойство maximumAge позволяет устройству отвечать немедленно из закэшированной позиции. Например, вы обращаетесь к getCurrentPosition() в первый раз, пользователь соглашается, и ваша функция успешно возвращает положение вычисленное ровно в 10:00. Ровно через минуту, в 10:01 вы вызываете getCurrentPosition() снова установив свойство maximumAge в 75000.

Вы тем самым говорите, что вам необязательно знать текущее положение пользователя. Вы были бы рады знать, где он был 75 секунд назад (75000 миллисекунд). Устройство знает, где пользователь был 60 секунд назад (60000 миллисекунд), так как оно рассчитало место после первого вызова getCurrentPosition(). Поэтому устройство не будет пересчитывать текущее местоположение пользователя. Оно вернет ту же информацию, что и в первый раз: ту же широту и долготу, ту же точность и то же время (10:00).

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

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

Сама функция watchPosition() возвращает число, которое следует где-то хранить. Если вы хотите остановить слежение за положением пользователя, то можете вызвать метод clearWatch(), передать ему это число и устройство остановит вызов функции. Если вы когда-либо использовали функции setInterval() и clearInterval() в JavaScript, то это работает точно так же.

А ещё Geolocation API позволяет "подписаться" на постоянное получение сведений о местоположении. Это может пригодиться при разработке навигационных веб-приложений, предназначенных для мобильных устройств; в результате такое приложение сможет постоянно отслеживать изменение местоположения устройства.

Чтобы выполнить "подписку" на постоянное получение данных о местоположении, следует воспользоваться методом watchPosition объекта Geolocation. Формат его вызова таков:

Этот метод принимает те же параметры, что и знакомый нам по параграфу 3 метод getCurrentPosition.

Метод watchPosition возвращает особую целочисленную величину, называемую идентификатором "подписки". Этот идентификатор следует сохранить в какой-либо переменной; впоследствии мы можем использовать его для отмены "подписки" на получение данных о местоположении. Впрочем, если мы не собираемся отменять "подписку", идентификатор, возвращённый методом watchPosition, можно и проигнорировать.

При первом вызове метода watchPosition сразу же запустится операция по получению текущего местоположения. Если она увенчается успехом, будет вызвана функция, переданная данному методу первым параметром, в противном случае - функция, переданная вторым параметром. Как видим, всё то же самое, что и в случае метода getCurrentPosition.

Выполненную ранее "подписку" на получение информации о местоположении можно отменить. Для этого применяется метод clearWatch объекта Geolocation. В качестве единственного параметра он принимает идентификатор "подписки", которую нужно отменить. Результата он не возвращает.

Несколько способов определить примерное местоположение пользователя по IP-адресу.

Sypex Geo

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

Пример использования:

Результат:

IP Geolocation API – бесплатен для некоммерческого использования, ключ к API не требуется. Сервис возвращает данные в формате JSON, XML, CSV, Newline, PHP (serialize) по GET-запросу.

Ограничения

45 запросов в минуту с одного IP-адреса, при превышении лимита будет отдаваться 429-я ошибка до тех пор, пока не будет сброшено ограничение. Если вы постоянно превышаете лимит, ваш IP-адрес будет заблокирован на 1 час.

С появлением HTML5 появилась возможность определить координаты посетителей Вашего сайта. Алгоритм работы этого механизма следующий: если есть GPS, то по нему и определяется местоположение, если его нет, то вычисляется уже не так точно с использованием того же IP и других механизмов. Но внутренняя обработка - это отдельная история. В HTML5 стало всё очень и очень просто, безусловно, без JavaScript тут то же не обошлось. Поэтому в этой статье я покажу, как определить местоположение пользователя на JavaScript.

Сразу привожу код:

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

Благодаря определению местоположения посетителя можно творить чудеса. Например, можно построить маршрут от его местоположения к Вашему офису (с использованием тех же Яндекс.Карт и его API). Или показать ближайший Ваш офис к посетителю, что, безусловно, его заинтересует близким местоположением. В общем, вариантов использования данного функционала очень и очень много.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

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

Он позволяет получать все вышеперечисленные данные и предоставляет 3 продукта API:

В своих предыдущих материалах я уже описывал способ определения IP-адреса пользователя программно и через Google Tag Manager для Google Analytics и Яндекс.Метрики. С помощью сервиса ipgeolocation.io и тега IP Geolocation API, который разработал Симо Ахава (Simo Ahava) и который добавляется в рабочую область из галереи решений, можно легко получить IP-адрес и другие данные о пользователе в dataLayer.

Бесплатный тариф предназначен для некоммерческого использования и имеет ограничение в 1000 запросов/день. После регистрации в личном кабинете необходимо скопировать API ключ (Your API Key), который вы вставите в тег Симо.

Скопируйте ключ API

Далее перейдите в Google Tag Manager и добавьте тег IP Geolocation API в свою рабочую область.

Галерея шаблонов сообщества GTM

Добавьте свой ключ API в соответствующее поле:

Ваш ключ API Key

В теге Симо Ахавы есть следующие настройки: Data Layer Settings, IP Address Settings, Other Settings.

Data Layer Settings

Если вы используете имя уровня данных отличное от dataLayer, то укажите его в поле глобальной переменной. В поле Custom event name можно указать значение ключа события (event) в объекте dataLayer, который содержит данные о геолокации и IP-адресе. По умолчанию оно содержит geolocate, но вы можете задать любое название события.

Пример имени события (moyEvent)

IP Address Settings

Доступно две настройки: Client IP (тот, который определит ipgeolocation.io) и Custom IP (можете использовать свой вариант, полезно в том случае, когда вы определяете IP-адрес каким-то другим способом, например, с помощью программного кода).

Other Settings

Другие настройки тега

В других настройках содержатся поля:

Fields to include (перечень включенных полей, которые попадут в конечный dataLayer);
Fields to exclude (перечень полей, которые требуется исключить из dataLayer);
Response language (язык ответа, некоторые значения местоположений будут переведены с английского языка на тот, который выберите из списка).

Например, если в поле Fields to include добавить zipcode, то в dataLayer останется только почтовый индекс. Все остальные данные будут исключены. Напротив, если в поле Fields to exclude ввести zipcode, то в dataLayer отобразится все, кроме почтового индекса. Если оба поля оставить пустыми, то в dataLayer попадут все данные, которые отдает сервис ipgeolocation.io.

После заполнения всех настроек вы можете добавить любой триггер к тегу. Например, Все страницы (All Pages), либо же какое-то определенное правило. Вы также сможете запускать тег по триггеру пользовательского события, который установили в настройках тега. В моем примере это moyEvent, а по умолчанию geolocate.

Примечание: тег опирается на библиотеку jQuery. Если ваш сайт еще не использует его, шаблон автоматически загрузит уменьшенную библиотеку jQuery вместе с API SDK.

Триггер - Пользовательское событие

Переменная уровня данных

Аналогично с другими параметрами. Проверить корректность извлечения информации можно в режиме предварительного просмотра GTM:

Данные по району в переменной уровня данных

Далее эту информацию можно передать в Google Analytics с помощью пользовательского параметра.

Читайте также: