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

JavaScript предоставляет нам различные API, в том числе и Geolocation API (API объекта геолокации), который, кроме всего прочего, дает нам возможность получить широту и долготу.

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

В данном обзоре мы сконцентрируем внимание на получении широты и долготы для пользователя и визуализируем данные с помощью OpenStreetMap.

Какие возможности Geolocation API нам пригодятся?

Нам понадобится navigator.geolocation и метод getCurrentPosition().

API геолокации публикуется через объект navigator.geolocation, который запрашивает у пользовательского браузера доступ к данным о местоположении. Если доступ предоставлен, браузер будет использовать наиболее доступные возможности устройства, для того чтобы получить необходимую информацию (например, GPS).

Geolocation.getCurrentPosition() возвращает текущее местоположение устройства: широту и долготу.

Мы будем использовать только один обязательный параметр - callback-функцию, в данном случае нам понадобится стрелочная функция (Arrow function).

HTML

Создадим страницу geo.html:

    
        
        

        
        
    
    
        Get Location
        

        
    

• #posStatus просто демонстрирует сообщение “Location…”.
• #locInfo демонстрирует значения широты и долготы, а так же ссылку на карту OpenStreetMap с соответствующими координатами.

JavaScript

В тег head мы добавим следующий JavaScript-код:

Результат

Откроем в браузера файл geo.html, нажмем кнопку Get Location (доступ к геоданным для сайта должен быть разрешен), через некоторое время мы получим широту, долготу и ссылку на карту с соответствующими координатами.

Спасибо за внимание.

Перевод статьи An Introduction to JavaScript’s Geolocation API.