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 = "Геолокация не поддерживается этим браузером.";
}
}
function showPosition(position) {
x.innerHTML = "Широта: " + position.coords.latitude +
"<br>Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »
Объяснение примера:
- Проверьте, поддерживается ли геолокация
- Если поддерживается, запустите метод getCurrentPosition(). Если нет, отобразить сообщение пользователю
- Если метод getCurrentPosition() выполнен успешно, он возвращает объект координат функции, указанной в параметре (showPosition)
- Функция showPosition() выводит широту и долготу
Приведенный выше пример представляет собой очень простой скрипт геолокации без обработки ошибок.
Обработка ошибок и отказов
Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он указывает функцию для запуска, если ей не удается получить местоположение пользователя:
Пример
function showError(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;
}
}
Попробуйте сами »
Отображение результата на карте
Чтобы отобразить результат на карте, необходим доступ к картографическому сервису, например 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() возвращает объект в случае успеха. Всегда возвращаются свойства широты, долготы и точности. Другие свойства возвращаются, если они доступны:
| Свойство | Вернёт |
|---|---|
| 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 = "Геолокация не поддерживается этим браузером.";
}
}
function showPosition(position) {
x.innerHTML = "Широта: " + position.coords.latitude +
"<br>Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »
