Большинство современных устройств позволяют определить своё местоположение через GPS, WiFi, или геопозицию по IP. Разработчики могут использовать эту информацию для предоставления поисковых результатов, отображения ближайших магазинов и других удобностей, связанных с картами.2 В этой статье мы рассмотрим как можно определить местоположение пользовательского устройства на чистом JavaScript, без каких-либо библиотек. Приступим!1 Источники местоположения JavaScript позволяет реализовать поставленную задачу посредством использования Geolocation API. В вашем распоряжении будет небольшой набор функций с помощью которых возможно определение позиции устройства по: GPS – для мобильных устройств, наиболее точный метод (погрешность в пределе 10 метров). WiFi – доступен для всех подключённых устройств. Довольно точен. Геолокация по IP – привязана к региону. Часто даёт большую погрешность, в зависимости от расположения оборудования провайдера. При запросе данных, браузер попытается извлечь информацию всеми тремя способами. Позиция по WiFi определяется быстрее по сравнению с GPS и наиболее точна по сравнению с геолокацией по IP. Работа с Geolocation API Geolocation API довольно-таки неплохо поддерживается браузерами, но всё равно было бы неплохо проверить доступность объекта Window.navigator. 1 if (navigator.geolocation) { 2 // Геолокация доступна 3 } 4 else { 5 // Геолокация не доступна 6 } В объекте navigator.geolocation доступны следующие методы: Geolocation.getCurrentPosition() – Определение текущей позиции устройства. Geolocation.watchPosition() – Отслеживание изменения позиции устройства и вызов функции обратного вызова. Geolocation.clearWatch() – Удаление обработчика метода watchPosition. Методы getCurrentPosition() и watchPosition() используются для схожих целей. Оба метода работают асинхронно, пытаясь извлечь позицию устройства. 01 navigator.geolocation.getCurrentPosition( 02 03 // Функция обратного вызова при успешном извлечении локации 04 function(position) { 05 06 /* 07 В объекте position изложена подробная информация 08 о позиции устройства: 09 10 position = { 11 coords: { 12 latitude - Широта. 13 longitude - Долгота. 14 altitude - Высота в метрах над уровнем моря. 15 accuracy - Погрешность в метрах. 16 altitudeAccuracy - Погрешность высоты над уровнем моря в метрах. 17 heading - Направление устройства по отношению к северу. 18 speed - Скорость в метрах в секунду. 19 } 20 timestamp - Время извлечения информации. 21 } 22 */ 23 24 }, 25 26 // Функция обратного вызова при неуспешном извлечении локации 27 function(error){ 28 29 /* 30 При неудаче, будет доступен объект error: 31 32 error = { 33 code - Тип ошибки 34 1 - PERMISSION_DENIED 35 2 - POSITION_UNAVAILABLE 36 3 - TIMEOUT 37 38 message - Детальная информация. 39 } 40 */ 41 42 } 43 ); Запрос на доступ к позиции Поскольку Geolocation API использует персональную информацию, то перед тем как использовать данный инструмент нужно запросить у пользователя разрешение. Браузер позаботится за отображение окна подтверждения, но есть и другой способ. Альтернативный способ может пригодится в случае отказа пользователя, которому в дальнейшем браузер не будет предлагать предоставить доступ. Безопасные хосты Ещё одним препятствием к использованию данного API является обязательная поддержка HTTPS. Согласно новым правилам безопасности, Google Chrome не позволит ненадёжным хостам запускать Geolocation API. Так что вам придётся установить SSL сертификат на ваш домен. Подробнее об этом можно найти тут. Демо Небольшой пример: извлекаем и отображаем на карте местоположение устройства пользователя. 01 findMeButton.on('click', function(){ 02 03 navigator.geolocation.getCurrentPosition(function(position) { 04 05 // Текущие координаты. 06 var lat = position.coords.latitude; 07 var lng = position.coords.longitude; 08 09 // Отрисовка карты. 10 var map = new GMaps({ 11 el: '#map', 12 lat: lat, 13 lng: lng 14 }); 15 16 map.addMarker({ 17 lat: lat, 18 lng: lng 19 }); 20 21 }); 22 23 });