HTML5 Guide-4. Используйте геолокацию для реализации функции позиционирования

Автор：Eve Cole Время обновления：2025-04-02 19:00:04

Сегодня мы хотим использовать геолокацию для реализации функций позиционирования. Мы можем получить объект геолокации через навигацию. Геолокация, которая предоставляет следующие методы:

GetCurrentPosition (обратный вызов, errorCallback, Options): Получите текущее местоположение;

WatchPosition (обратный вызов, ошибка, параметры): запустите мониторинг текущей позиции;

ClearWatch (ID): Прекратите контролировать текущее местоположение.

ПРИМЕЧАНИЕ. Браузер, используемый в следующем примере, является Chrome. Используя другие браузеры, я не могу гарантировать, что результаты работы соответствуют результатам, отображаемым примером.

1. Получите текущее местоположение

Мы будем использовать метод GetCurrentPosition, чтобы получить текущую позицию. Информация о позиции не будет возвращена непосредственно в форме результата. Нам нужно использовать функцию обратного вызова для его обработки. Там будет некоторая задержка в получении координат, и вы также попросите разрешения на доступ. Давайте посмотрим на следующий пример:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

Таблица {Border-Collapse: Collapsse;}

th, td {padding: 4px;}

th {text-align: right;}

</style>

</head>

<тело>

<Таблица>

<tr>

<Th> долгота: </th>

<Th> широта: </th>

</tr>

<tr>

<Th> Высота: </th>

<Th> Точность: </th>

</tr>

<tr>

<Th> Точность высоты: </th>

<th> Заголовок: </th>

</tr>

<tr>

<Th> Скорость: </th>

<Th> марка времени: </th>

</tr>

</table>

<Скрипт>

navigator.geolocation.getCurrentPosition (DisplayPosition);

функция DisplayPosition (POS) {

var properties = [«долгота», «широта», «высота», «высота», «Точность», «высота», «Heading», «Speed»];

for (var i = 0, len = properties.length; i <len; i ++) {

var value = pos.coords [свойства [i]];

document.getElementbyId (свойства [i]). innerHtml = value;

}

document.getElementbyId ('timeStamp'). innerhtml = pos.timestamp;

}

</script>

</body>

</html>

Возвращенный объект позиции содержит два свойства, координации: информация о координате возврата; Временная метка: время для получения информации о координат. Среди них координации включают следующие свойства: широта: широта; Долгота: долгота; высота: высота; Точность: точность (счетчик); Высокоэккурация: точность высоты (счетчик); Заголовок: направление путешествия; Скорость: скорость перемещения (метр/секунда).

Не вся информация будет возвращена, она зависит от устройства, которое вы размещаете в браузере. Мобильные устройства, такие как GPS, акселераторы и Compass, возвращают большую часть информации, но домашние компьютеры не будут работать. Информация о местоположении, полученная домашним компьютером, зависит от сетевой среды или Wi -Fi. Давайте посмотрим на результаты работы приведенного выше примера.

Нажмите, чтобы получить информацию о координате.

2. Обработайте исключения

Теперь мы представляем обработку исключений GetCurrentPosition, которая реализуется с помощью функции обратного вызова ErrorCallback. Ошибка параметра, возвращаемая функцией, содержит два свойства, код: код типа ошибки; Сообщение: сообщение об ошибке. Код содержит три значения: 1: пользователь не разрешается использовать геолокацию; 2: Координатная информация не может быть получена; 3: Поиск информационного времени получается.

Давайте посмотрим на пример ниже:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

Таблица {Border-Collapse: Collapsse;}

th, td {padding: 4px;}

th {text-align: right;}

</style>

</head>

<тело>

<Таблица>

<tr>

<Th> долгота: </th>

<Th> широта: </th>

</tr>

<tr>

<Th> Высота: </th>

<Th> Точность: </th>

</tr>

<tr>

<Th> Точность высоты: </th>

<Th> заголовок: </th>

</tr>

<tr>

<Th> Скорость: </th>

<Th> марка времени: </th>

</tr>

<tr>

<Th> Код ошибки: </th>

<Th> Сообщение об ошибке: </th>

</tr>

</table>

<Скрипт>

navigator.geolocation.getCurrentPosition (DisplayPosition, HandleError);

функция DisplayPosition (POS) {

var properties = [«долгота», «широта», «высота», «Точность», «Высокоэкккурация», «заголовок», «скорость»];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [свойства [i]];

document.getElementbyId (свойства [i]). innerHtml = value;

}

document.getElementbyId ("timeStamp"). innerhtml = pos.timestamp;

}

функция handerror (err) {

document.getElementbyId ("errcode"). innerhtml = err.code;

document.getElementbyId ("errmessage"). innerHtml = err.message;

}

</script>

</body>

</html>

Разрешение отказано, результат работы:

3. Используйте геолокационные элементы параметров

Параметры в GetCurrentPosition (обратный вызов, ErrorCallback, Options) имеют следующие параметры для использования, EnableHighaccuracy: используйте лучший эффект; Тайм -аут: тайм -аут (миллисекунд); Максимация: укажите время кэша (миллисекунд). Давайте посмотрим на следующий пример:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

Таблица {Border-Collapse: Collapsse;}

th, td {padding: 4px;}

th {text-align: right;}

</style>

</head>

<тело>

<Таблица>

<tr>

<Th> долгота: </th>

<Th> широта: </th>

</tr>

<tr>

<Th> Высота: </th>

<Th> Точность: </th>

</tr>

<tr>

<Th> Точность высоты: </th>

<Th> заголовок: </th>

</tr>

<tr>

<Th> Скорость: </th>

<Th> марка времени: </th>

</tr>

<tr>

<Th> Код ошибки: </th>

<Th> Сообщение об ошибке: </th>

</tr>

</table>

<Скрипт>

var options = {

Enablehighaccuracy: ложь,

Тайм -аут: 2000,

максимума: 30000

};

navigator.geolocation.getCurrentPosition (DisplayPosition, Handleerr, Options);

функция DisplayPosition (POS) {

var properties = [«долгота», «широта», «высота», «Точность», «Высокоэкккурация», «заголовок», «скорость»];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [свойства [i]];

document.getElementbyId (свойства [i]). innerHtml = value;

}

document.getElementbyId ("timeStamp"). innerhtml = pos.timestamp;

}

функция handerror (err) {

document.getElementbyId ("errcode"). innerhtml = err.code;

document.getElementbyId ("errmessage"). innerHtml = err.message;

}

</script>

</body>

</html>

4. Мониторинг изменения местоположения

Ниже мы представляем использование метода WatchPosition для реализации изменений позиции. Его метод использования такой же, как и GetCurrentPosition. Давайте посмотрим на пример:

<! Doctype html>

<html>

<голова>

<title> Пример </title>

<style>

Таблица {Border-Collapse: Collapsse;}

th, td {padding: 4px;}

th {text-align: right;}

</style>

</head>

<тело>

<Таблица>

<tr>

<Th> долгота: </th>

<Th> широта: </th>

</tr>

<tr>

<Th> Высота: </th>

<Th> Точность: </th>

</tr>

<tr>

<Th> Точность высоты: </th>

<Th> заголовок: </th>

</tr>

<tr>

<Th> Скорость: </th>

<Th> марка времени: </th>

</tr>

<tr>

<Th> Код ошибки: </th>

<Th> Сообщение об ошибке: </th>

</tr>

</table>

<button id = "нажатие"> Отменить просмотр </button>

<Скрипт>

var options = {

Enablehighaccuracy: ложь,

Тайм -аут: 2000,

максимума: 30000

};

var watchid = navigator.geolocation.watchposition (DisplayPosition, Handleerr, Options);

document.getElementById ("pressMe"). OnClick = function (e) {

navigator.geolocation.clearwatch (watchid);

};

функция DisplayPosition (POS) {

var properties = [«долгота», «широта», «высота», «Точность», «Высокоэкккурация», «заголовок», «скорость»];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [свойства [i]];

document.getElementbyId (свойства [i]). innerHtml = value;

}

document.getElementbyId ("timeStamp"). innerhtml = pos.timestamp;

}

функция handerror (err) {

document.getElementbyId ("errcode"). innerhtml = err.code;

document.getElementbyId ("errmessage"). innerHtml = err.message;

}

</script>

</body>

</html>

Когда кнопка «Отмена просмотра» нажимается, мониторинг останавливается.

Демонстрация Адрес: html5guide.geolocation.zip