Geolocation API

что такое JavaScript Geolocation API и как им пользоваться

2020-01-09 dr.Brain

время чтения 2 мин.

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

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

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

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

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

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

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

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

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

HTML

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Location Test</title>
    </head>
    
    <body>
        <button onclick='locate();' >Get Location</button>
        <h1 id = 'posStatus'></h1>
        <a id = 'locInfo' target="#"></a>
    </body>
</html>

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

JavaScript

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

<script>
function locate() {
   const posStatus = document.querySelector('#posStatus');
   const locInfo = document.querySelector('#locInfo');
   posStatus.innerHTML='Locating...'
   if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position)=>{
      const lat  = position.coords.latitude;
      const long = position.coords.longitude;
      posStatus.innerHTML='Location';
      // Display Latitude and Logitude
      locInfo.innerHTML = `Latitude: ${lat}, Longitude: ${long}`;
      // Create the link. Use map=15-19 for zooming out and in
      // Pass lat and long to openstreetmap
      locInfo.href = `https://www.openstreetmap.org/#map=19/${lat}  /${long}`;
      });
   }
}
</script>

Результат

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

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

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