Geolocation API

Большинство современных устройств способны обнаруживать свое собственное местоположение через 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 - надежный и готовый к использованию инструмент, поэтому мы рекомендуем вам поиграть с ним и посмотреть на что он способен. Если вы видели оригинальные использования этой технологии в Интернете, или сделали крутой проектом самостоятельно, - поделитесь с нами, нам было бы очень интересно!