API веб-геолокации
Найдите позицию пользователя
HTML Geolocation API используется для получения географического положения пользователя.
Поскольку это может поставить под угрозу конфиденциальность, позиция недоступна, пока пользователь не одобрит ее.
Примечание. Геолокация наиболее точна для устройств с GPS, таких как смартфон.
API геолокации поддерживается во всех браузерах:
Yes | Yes | Yes | Yes | Yes |
Примечание. Начиная с Chrome 50 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>
Объяснение примера:
- Проверьте, поддерживается ли геолокация
- Если поддерживается, запустите метод 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;
}
}
Отображение результата на карте
Чтобы отобразить результат на карте, вам необходим доступ к картографическому сервису, например Google Maps.
В приведенном ниже примере возвращенные широта и долгота используются для отображения местоположения на карте 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+"'>";
}
Информация о местоположении
На этой странице показано, как показать положение пользователя на карте.
Геолокация также очень полезна для получения информации о местоположении, например:
- Актуальная местная информация
- Отображение достопримечательностей рядом с пользователем
- Пошаговая навигация (GPS)
Метод getCurrentPosition() — возвращаемые данные
Метод getCurrentPosition()
возвращает объект в случае успеха. Всегда возвращаются свойства широты, долготы и точности. Другие свойства возвращаются, если они доступны:
Property | Returns |
---|---|
coords.latitude | The latitude as a decimal number (always returned) |
coords.longitude | The longitude as a decimal number (always returned) |
coords.accuracy | The accuracy of position (always returned) |
coords.altitude | The altitude in meters above the mean sea level (returned if available) |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
coords.heading | The heading as degrees clockwise from North (returned if available) |
coords.speed | The speed in meters per second (returned if available) |
timestamp | The date/time of the response (returned if available) |
Объект геолокации — другие интересные методы
У объекта 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>