HTML Geolocation
API HTML Geolocation API используется для определения местоположения пользователя.
Найдите позицию пользователя
HTML Geolocation API используется для определения географического положения пользователя.
Поскольку это может поставить под конфиденциальность, позиция недоступна, если пользователь не одобрит ее.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает геолокацию.
Примечание: С Chrome 50 API геолокации будет работать только в защищенных контекстах, таких как HTTPS. Если ваш сайт размещен в небезопасном источнике (например, HTTP), запросы на получение местоположения пользователей больше не будут работать.
Использование HTML Geolocation
Метод 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;
}
}
Информация О Конкретном Местоположении
Эта страница продемонстрировала, как показать позицию пользователя на карте.
Геолокация также очень полезна для информации о конкретном местоположении, например:
Метод getCurrentPosition() - Возвращает данные
Метод getCurrentPosition() возвращает объект в случае успешного выполнения. Всегда возвращаются свойства широты, долготы и точности. Другие свойства возвращаются, если они доступны:
coords.latitude Широта в виде десятичного числа (всегда возвращается)
coords.longitude Долгота в виде десятичного числа (всегда возвращается)
coords.accuracy Точность определения местоположения (всегда возвращается)
coords.altitude Высота в метрах над средним уровнем моря (возвращается, если доступно)
coords.altitudeAccuracy Точность определения местоположения по высоте (возвращается, если доступно)
coords.heading Направление в градусах по часовой стрелке от севера (возвращается, если доступно)
coords.speed Скорость в метрах в секунду (возвращается, если доступно)
timestamp - дата/время ответа (возвращается, если доступно)
Геолокация объекта - Другие интересные методы
Объект геолокации также имеет другие интересные методы:
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>