HTML5 Геолокация API
API геолокации HTML используется для определения местоположения пользователя.
Найдите положение пользователя
API геолокации HTML используется для получения географического положения пользователя.
Поскольку это может поставить под угрозу конфиденциальность, позиция недоступна, если пользователь не одобрит ее.
Примечание: Геолокация наиболее точна для устройств с GPS, таких как смартфон.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает геолокацию.
| API | |||||
|---|---|---|---|---|---|
| Геолокация | 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 = "Геолокация не поддерживается этим браузером.";
}
}
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) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var 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 | Дата/Время ответа (возвращается, если имеется) |
Геолокация объекта - другие интересные методы
Объект геолокации также имеет другие интересные методы:
watchPosition()- Возвращает текущее положение пользователя и продолжает возвращать обновленное положение по мере движения пользователя (например, GPS в автомобиле).clearWatch()- Останавливает работу методwatchPosition().
В приведенном ниже примере показано следующее: метод watchPosition().
Вам нужно точное GPS устройство, чтобы проверить это (например, смартфон):
Пример
<script>
var 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>
Попробуйте сами »