API геолокации

Найдите позицию пользователя

HTML Geolocation API используется для получения географического положения пользователя.

Поскольку это может поставить под угрозу конфиденциальность, позиция недоступна, пока пользователь не одобрит ее.

Примечание

Геолокация наиболее точна для устройств с GPS, например смартфонов.

Поддержка браузера

API геолокации поддерживается во всех браузерах:


Yes	Yes	Yes	Yes	Yes

Примечание

API геолокации будет работать только в безопасных контекстах, таких как как HTTPS.

Если ваш сайт размещен на незащищенном источнике (например, HTTP), запросы на получение местоположения пользователя больше не будут работать.

Использование API геолокации

Метод getCurrentPosition() используется для возврата позиции пользователя.

В приведенном ниже примере возвращается широта и долгота позиции пользователя:

Пример

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

 function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
 }
</script>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

Пример объяснен:

Проверьте, поддерживается ли геолокация
Если поддерживается, запустите метод getCurrentPosition(). Если нет, отобразить сообщение пользователю
Если метод getCurrentPosition() успешен, он возвращает объект координат функции, указанной в параметре (showPosition).
Функция showPosition() выводит широту и долготу.

Приведенный выше пример представляет собой очень простой сценарий геолокации без обработки ошибок.

Обработка ошибок и отказов

Второй параметр метода getCurrentPosition() используется для обработки ошибки. Он определяет функцию, которая будет запущена, если ей не удастся получить местоположение пользователя:

Пример

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
    case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
    }
 }

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Отображение результата на карте

Чтобы отобразить результат на карте, вам необходим доступ к картографическому сервису, например Google. Карты.

В приведенном ниже примере возвращенные широта и долгота используются для отображения местоположения в Google. Карта (с использованием статического изображения):

Пример

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

   let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
   "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

   document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
 }

Попробуй сам

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Как отобразить интерактивную карту Google с помощью маркера, масштабирования и перетаскивания.

Скрипт карты Google

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Информация для конкретного местоположения

На этой странице показано, как показать положение пользователя на карте.

Геолокация также очень полезна для получения информации о конкретном местоположении, например:

Актуальная местная информация
Отображение достопримечательностей рядом с пользователем
Пошаговая навигация (GPS)

Метод getCurrentPosition() — возврат данных

Метод getCurrentPosition() возвращает объект в случае успеха. Широта, Свойства долготы и точности всегда возвращаются. Остальные свойства возвращаются если доступно:

coords.latitude: Широта как десятичное число (всегда возвращается)
coords.longitude: Долгота как десятичное число (всегда возвращается)
coords.accuracy: Точность положения (всегда возвращается)
coords.altitude: Высота в метрах над средним уровнем моря (возвращается, если доступно)
coords.altitudeAccuracy: Точность высоты положения (возвращается, если доступно)
coords.heading: Курс в градусах по часовой стрелке от севера (возвращается, если доступно)
coords.speed: Скорость в метрах в секунду (возвращается, если доступно)
timestamp: Дата/время ответа (возвращается, если доступно)

Объект геолокации — другие интересные методы

У объекта Geolocation есть и другие интересные методы:

watchPosition() — возвращает текущую позицию пользователя и продолжает возвращать обновленную позицию по мере движения пользователя (например, GPS в автомобиле).
clearWatch() — останавливает метод watchPosition().

В примере ниже показан метод watchPosition(). Чтобы проверить это, вам понадобится точное GPS-устройство (например, смартфон):

Пример

<script>
const x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
 function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
 }
</script>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

API геолокации

Оглавление

Найдите позицию пользователя

Примечание

Поддержка браузера

Примечание

Использование API геолокации

Пример

Обработка ошибок и отказов

Пример

Отображение результата на карте

Пример

Информация для конкретного местоположения

Метод getCurrentPosition() — возврат данных

Объект геолокации — другие интересные методы

Пример