Большинство современных устройств способны обнаруживать свое собственное местоположение через GPS, Wi-Fi, или IP геолокацию.
В приведенной ниже статье мы расскажем как можно определить местоположение пользовательского устройства с помощью JavaScript, без каких-либо внешних зависимостей или сторонних сервисов.
Источники местоположения
JavaScript предлагает простой, но мощный инструмент для обнаружения устройств с помощью Geolocation API. Она состоит из небольшого набора удобных в использовании методов, которые могут получить позицию устройства через все три ранее упомянутых сервиса:
- GPS – Используется на мобильных устройствах, точность до 10 метров.
- Wi-Fi – доступна на большинстве подключенных к интернету устройствах, также очень точна.
- IP геолокация – привязана к региону и ненадежна, используется в качестве наихудшего сценария, когда первые два потерпят неудачу.
При запросе гео-данных, браузер будет пытаться использовать все три способа. Результаты чаще используются от Wi-Fi источника, поскольку в этом случае данные определяются быстрее, чем с помощью GPS. Кроме того, этот способ более точен, чем IP geolcation.
Использование Geolocation API
Geolocation API имеет полную кроссбраузерную поддержку:
Тем не менее, не помешает убедиться, что браузер пользователя поддерживает HTML5 Geolocation API.
if (navigator.geolocation) {
// Геолокация доступна
}
else {
// Геолокация не доступна
}
Внутри объекта navigator.geolocation
размещаются следующие API-методы:
Geolocation.getCurrentPosition()
– определяет текущую позицию устройства.
Geolocation.watchPosition()
– отслеживает изменения в местоположении и вызывает функцию обратного вызова.
Geolocation.clearWatch()
– удаляет обработчик события watchPosition.
Методы getCurrentPosition()
и watchPosition()
используются для схожих целей. Они обе работают в асинхронном режиме, пытаясь получить позицию устройства и в зависимости от результата вызвать функцию обратного вызова или функцию обработки ошибки, если она предусмотрена разработчиком.
navigator.geolocation.getCurrentPosition(
// Функция обратного вызова при успешном извлечении локации
function(position) {
/* В объекте position хранится информация о позиции устройства:
position = {
coords: {
latitude - Широта
longitude - Долгота
altitude - Высота в метрах над уровнем моря
accuracy - Погрешность в метрах
altitudeAccuracy - Погрешность высоты над уровнем моря в метрах
heading - Направление устройства по отношению к северу
speed - Скорость в метрах в секунду
}
timestamp - Время извлечения информации.
}
*/
},
// Функция обратного вызова при неуспешном извлечении локации
function(error){
/* При неудаче, будет доступен объект error:
error = {
code - Тип ошибки
1 - PERMISSION_DENIED
2 - POSITION_UNAVAILABLE
3 - TIMEOUT
message - Детальная информация.
} */
}
);
Как видите, Geolocation API довольно легко в использовании. Мы просто должны вызвать правильный метод, получить координаты, а затем делать с ними все, что захотим.
Запрос разрешения на определение положения
Поскольку Geolocation API использует персональную информацию когда приложение пытается получить доступ к нему в первый раз, то мы увидим диалоговое окно с запросом разрешения. Это гарантирует конфиденциальность личных данных пользователя.
Запрос разрешения в Chrome
Запрос разрешения в Chrome под Android
Браузер, как правило, берет на себя для отображения диалогового окна, но разрешение также можно запросить программным способом. Это может пригодится в случае отказа пользователя раскрыть свое местоположение и которому браузер больше не будет докучать с подобными просьбами.
Безопасные хосты
Другой защитной мерой является использование HTTPS-соединения. В связи с новой политики веб-безопасности, Google Chrome (для настольных и мобильных версий) больше не позволяет использовать незащищенные хосты для запуска Geolocation API. Вместо этого, разработчики, которые хотят использовать эту функцию должны пользоваться протоколом HTTPS, что сводит к минимуму риски, связанные с кражей или злоупотреблением информацией.
Подробнее об этом можно прочесть в посте разработчиков Google.
Пример работы с Geolocation API
Чтобы продемонстрировать как все это работает, мы создали простое приложение, которое состоит из одной кнопки, определяющей при нажатии на нее координаты устройства и показывающее его положение на карте.
findMeButton.on('click', function(){
navigator.geolocation.getCurrentPosition(function(position) {
// Текущие координаты
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Создаем новую карту, помещаем маркер в местонахождение устр-ва
var map = new GMaps({
el: '#map',
lat: lat,
lng: lng
});
map.addMarker({
lat: lat,
lng: lng
});
});
});
Заключение
Gelocation API - надежный и готовый к использованию инструмент, поэтому мы рекомендуем вам поиграть с ним и посмотреть на что он способен. Если вы видели оригинальные использования этой технологии в Интернете, или сделали крутой проектом самостоятельно, - поделитесь с нами, нам было бы очень интересно!