English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник HTML5

API HTML5

Медиа HTML5

Графика HTML5

Геолокация HTML5

HTML5 Geolocation (геолокация) используется для определения местоположения пользователя.

Определение местоположения пользователя

API Geolocation HTML5 используется для получения географического положения пользователя.

Учитывая, что эта функция может нарушать конфиденциальность пользователей, информация о местоположении пользователя недоступна без их согласия.

Поддержка браузеров

Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддерживают Geolocation (геолокацию).

Внимание: Геолокация (геолокация) для устройств с GPS, таких как iPhone, более точна.

HTML5 - Использование геолокации

Используйте метод getCurrentPosition() для получения местоположения пользователя.

Следующий пример представляет собой простую пример геолокации, который может вернуть широту и долготу пользователя:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">Нажми кнопку, чтобы получить текущие координаты (может занять много времени):</p>
<button　onclick="getLocation()">Нажми меня</button>
<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 + " ;"　
　　　　"Широта: " + position.coords.longitude;　　　　
}
</script>
</body>
</html>
Тестировать, смотреть ‹/›

Пример анализа:

  • Проверка поддержки геолокации

  • Если поддержка, то запустите метод getCurrentPosition(). Если поддержка отсутствует, то отобразите пользователю сообщение.

  • Если getCurrentPosition() выполнится успешно, то в функцию showPosition() будет возвращен объект coordinates

  • Функция showPosition() получает и отображает долготу и широту

Пример выше представляет собой очень базовый скрипт геолокации без обработки ошибок.

Обработка ошибок и отказа

Второй параметр метода getCurrentPosition() используется для обработки ошибок. Он указывает на функцию, которая выполняется при失败 получении местоположения пользователя:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">Нажми кнопку, чтобы получить текущие координаты (может занять много времени):</p>
<button　onclick="getLocation()">Нажми меня</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Этот браузер не поддерживает геолокацию.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML = "Широта: " + position.coords.latitude + " ;"　
　　　　"Широта: " + position.coords.longitude;　　　　
}
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;
　　　　}
}
</script>
</body>
</html>
Тестировать, смотреть ‹/›

Код ошибки:

  • Permission denied - пользователь не позволяет геолокацию

  • Position unavailable - не удалось получить текущее местоположение

  • Timeout - операция истекла время ожидания

Отображение результатов на карте

Чтобы отобразить результаты на карте, вам нужно использовать сервис карт, который поддерживает координаты, например Google Maps или Baidu Maps:

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">Нажми кнопку, чтобы получить текущие координаты (может занять много времени):</p>
<button　onclick="getLocation()">Нажми меня</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML = "Этот браузер не поддерживает получение геолокации.";
　　　　}
}
function showPosition(position)
{
　　　　var latlon=position.coords.latitude+","+position.coords.longitude;
　　　　var img_url="http://maps.googleapis.com/maps/api/staticmap?center=";
　　　　+latlon+"&zoom=14&size=400x300&sensor=false";
　　　　document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
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;
　　　　}
}
</script>
</body>
</html>
Тестировать, смотреть ‹/›

В предыдущем примере мы используем возвращенные данные о долготе и широте для отображения местоположения на карте Google (используя статические изображения).

Сценарий Google Maps
Верхние ссылки показывают, как использовать скрипты для отображения интерактивных карт с опциями маркеров, масштабирования и перетаскивания.

Информация о заданном местоположении

На этой странице показано, как отображать местоположение пользователя на карте. Однако, геолокация также очень полезна для получения информации о заданном местоположении.

Пример:

  • Обновление локальной информации

  • Отображение интересных точек вокруг пользователя

  • Интерактивная система навигации в автомобиле (GPS)

Метод getCurrentPosition() - возвращаемые данные

Если успешен, то метод getCurrentPosition() возвращает объект. Всегда возвращаются атрибуты latitude, longitude и accuracy. Если они доступны, то возвращаются и другие下面的 атрибуты.

АтрибутОписание
coords.latitudeДесятичное число широты
coords.longitudeДесятичное число долготы
coords.accuracyТочность местоположения
coords.altitudeВысота над уровнем моря, в метрах
coords.altitudeAccuracyТочность высоты местоположения
coords.headingНаправление, начиная с севера, в градусах
coords.speedСкорость, в метрах в секунду
timestampОтветная дата/время

Объект Geolocation - другие интересные методы

watchPosition() - возвращает текущее местоположение пользователя и продолжает возвращать обновления местоположения при движении пользователя (как GPS в автомобиле).

clearWatch() - останавливает метод watchPosition()

Ниже приведен пример метода watchPosition(). Для тестирования этого примера вам потребуется точное GPS-устройство (например, iPhone):

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
</head>
<body>
<p　id="demo">Нажми кнопку, чтобы получить текущие координаты (может занять много времени):</p>
<button　onclick="getLocation()">Нажми меня</button>
<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 + " ;"　
　　　　"Широта: " + position.coords.longitude;　　　　
}
</script>
</body>
</html>
Тестировать, смотреть ‹/›
Video в HTML5Перетаскивание в HTML5