HTML Геолокация API
Geolocation API используется для получения текущего местоположения пользователя.
Определение местоположения пользователя
Geolocation API используется для доступа к текущему местоположению пользователя.
Поскольку это может нарушить конфиденциальность, местоположение недоступно, пока пользователь не одобрит запрос.
Примечание: Geolocation API доступен только в безопасных контекстах, таких как HTTPS.
Совет: Geolocation API работает наиболее точно на устройствах с GPS, таких как смартфоны или смарт‑часы.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает Geolocation.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 | 12.0 | 3.5 | 5.0 | 10.6 |
Использование HTML Geolocation API
Доступ к Geolocation API осуществляется через вызов navigator.geolocation. Это заставляет браузер запросить у пользователя разрешение на доступ к его данным о местоположении. Если пользователь согласится, браузер выберет лучшую доступную технологию на устройстве (например, GPS), чтобы определить координаты.
Метод getCurrentPosition() используется для получения текущего местоположения пользователя.
Пример ниже возвращает широту и долготу текущего местоположения пользователя:
Пример
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Геолокация не поддерживается этим браузером.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error() {
alert("К сожалению, местоположение недоступно.");
}
</script>
Попробуйте сами »
Пояснение примера:
- Проверяется, поддерживает ли браузер Geolocation API
- Если поддерживает — вызывается метод
getCurrentPosition(), иначе выводится сообщение - Функция
success()выводит широту и долготу пользователя - Функция
error()показывает предупреждение, если произошла ошибка при выполненииgetCurrentPosition()
Обработка ошибок и отказов
Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он определяет функцию, которая будет выполнена, если получить местоположение пользователя не удалось.
Вот пример более детальной обработки ошибок:
Пример
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Пользователь отклонил запрос на определение местоположения.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Информация о местоположении недоступна.";
break;
case error.TIMEOUT:
x.innerHTML = "Запрос на получение местоположения пользователя завершился по истечении времени ожидания.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Произошла неизвестная ошибка.";
break;
}
}
Попробуйте сами »
Информация, привязанная к местоположению
Geolocation также очень полезен для информации, связанной с местом, например:
- Актуальная локальная информация
- Показ точек интереса рядом с пользователем
- Пошаговая навигация (GPS)
Метод getCurrentPosition() — возвращаемые данные
Метод getCurrentPosition() возвращает объект при успешном выполнении. Свойства latitude, longitude и accuracy возвращаются всегда. Остальные свойства — только если доступны:
| Свойство | Описание |
|---|---|
| coords.latitude | Широта в виде десятичного числа (возвращается всегда) |
| coords.longitude | Долгота в виде десятичного числа (возвращается всегда) |
| coords.accuracy | Точность определения позиции (возвращается всегда) |
| coords.altitude | Высота над уровнем моря в метрах (если доступно) |
| coords.altitudeAccuracy | Точность определения высоты (если доступно) |
| coords.heading | Направление в градусах по часовой стрелке от Севера (если доступно) |
| coords.speed | Скорость в метрах в секунду (если доступно) |
| timestamp | Дата/время получения данных (если доступно) |
Объект Geolocation — Другие полезные методы
Объект Geolocation также содержит несколько дополнительных методов:
watchPosition()— возвращает текущее местоположение пользователя и продолжает обновлять данные при его движении (как GPS‑навигация в автомобиле).clearWatch()— останавливает выполнение методаwatchPosition().
Ниже приведён пример использования метода watchPosition(). Для корректного тестирования требуется устройство с точным GPS (например, смартфон):
Пример
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Геолокация не поддерживается этим браузером.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Пользователь отклонил запрос на геолокацию.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Информация о местоположении недоступна.";
break;
case error.TIMEOUT:
x.innerHTML = "Время ожидания получения местоположения истекло.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Произошла неизвестная ошибка.";
break;
}
}
</script>
Попробуйте сами »
