JavaScript - Веб API Геолокации
Найдите позицию пользователя
API геолокации HTML используется для определения географического положения пользователя.
Поскольку это может поставить под угрозу конфиденциальность, позиция недоступна, пока пользователь не одобрит ее.
Примечание: Геолокация наиболее точна для устройств с GPS, например смартфона.
API геолокации поддерживается во всех браузерах:
| Да | Да | Да | Да | Да |
Примечание: Начиная с Chrome 50, API геолокации будет работать только в безопасных контекстах, таких как HTTPS. Если ваш сайт размещен в незащищенном источнике (например, HTTP), запросы на получение местоположения пользователей больше не будут работать.
Использование API геолокации
Метод 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 = "Широта: " + position.coords.latitude +
"<br> Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »
Объяснение примера:
- Проверьте, поддерживается ли геолокация
- Если поддерживается, запустите метод getCurrentPosition(). Если нет, отобразить сообщение пользователю
- Если метод getCurrentPosition() успешен, он возвращает объект координат функции, указанной в параметре (showPosition).
- Функция showPosition() выводит широту и долготу.
Приведенный выше пример представляет собой очень простой скрипт геолокации без обработки ошибок.
Обработка ошибок и отклонений
Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он указывает функцию, которую нужно запустить, если не удается получить местоположение пользователя:
Пример
function showError(error) {
switch(error.code) {
case error.PERMISSION_DRUIED:
x.innerHTML = "Пользователь отклонил запрос на геолокацию."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Информация о местоположении недоступна."
break;
case error.TIMEOUT:
x.innerHTML = "Истекло время ожидания запроса на получение местоположения пользователя."
break;
case error.UNKНЕТWN_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 | Дата/время ответа (возвращается, если доступно) |
Объект геолокации - другие интересные методы
У объекта 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 = "Геолокация не поддерживается этим браузером.";
}
}
function showPosition(position) {
x.innerHTML = "Широта: " + position.coords.latitude +
"<br>Долгота: " + position.coords.longitude;
}
</script>
Попробуйте сами »
