API геолокации HTML
HTML Geolocation API используется для определения местоположения пользователя.
Найдите позицию пользователя
HTML Geolocation API используется для получения географического положения пользователя.
Поскольку это может поставить под угрозу конфиденциальность, позиция недоступна, пока пользователь не одобрит ее.
Примечание. Геолокация наиболее точна для устройств с GPS, таких как смартфоны.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую геолокацию.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Примечание. Начиная с Chrome 50 API геолокации будет работать только в защищенных контекстах, таких как HTTPS. Если ваш сайт размещен в незащищенном источнике (например, HTTP), запросы на получение местоположения пользователей больше не будут работать.
Использование HTML-геолокации
Метод getCurrentPosition()используется для возврата позиции пользователя.
Пример ниже возвращает широту и долготу позиции пользователя:
Пример
<script>
var 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;
}
}
Информация о местоположении
На этой странице показано, как показать положение пользователя на карте.
Геолокация также очень полезна для получения информации о местоположении, например:
- Актуальная местная информация
- Отображение достопримечательностей рядом с пользователем
- Пошаговая навигация (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>
var 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>