Как уже упоминалось, для того чтобы метод getCurrentPosition() работал правильно, ему достаточно передать только первый атрибут. Это должна быть функция обратного вызова, которая получит объект с именем Position, содержащий всю информацию, извлеченную геолокацион-ными системами.
У объекта Position два атрибута:
— coords. Содержит набор значений, определяющих позицию устройства, а также другую важную информацию. Для доступа к значениям предназначены семь внутренних атрибутов: latitude (широта), longitude (долгота), altitude (высота в метрах), accuracy (точность в метрах), altitudeAccuracy (точность определения высоты в метрах), heading (направление в градусах) и speed (скорость в метрах в секунду);
— timestamp. Указывает время, когда была получена эта информация.
Этот объект передается функции обратного вызова, после чего можно обращаться к перечисленным значениям внутри этой функции. Давайте рассмотрим практический пример использования данного метода.
Листинг 9.1. HTML-документ для тестирования геолокации
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Геолокация</title> <script src="geolocation. js"></script>
</head>
<body>
<section id="location">
<button id="getlocation">y3HaTb мое местоположение</button> </section>
</body>
</html>
Код из листинга 9.1 будет служить шаблоном для проверки остальных примеров из этой главы. Это всего лишь элемент <button> внутри элемента <section>, который мы будем использовать для отображения информации, извлеченной геолокационной системой.
Листинг 9.2. Получение информации о местоположении
Function initiate(){
Var get=document. getElementById(‘getlocation’); get. addEventListener(‘click’, getlocation, false);
}
Function getlocation(){
Navigator. geolocation. getCurrentPosition(showinfo);
}
Function showinfo(position){
Var location=document. getElementById(‘location’); var data=»;
Data+=’Широта: ‘+position. coords. latitude+'<br>’; data+=’Долгота: ‘+position. coords. longitude+'<br>’; data+=’T04H0CTb: ‘+position. coords. accuracy+’mts.<br>’; location. innerHTML=data;
}
Window. addEventListener(‘load’, initiate, false);
Внедрять возможности API геолокации очень просто: мы применяем метод getCurrentPosition() и создаем функцию, которая будет выводить на экран возвращенные значения. Метод getCurrentPosition() принадлежит объекту geolocation. Это новый объект, входящий в объект navigator — объект JavaScript, который ранее предназначался для возвращения информации о браузере и системе. Таким образом, для того чтобы обратиться к методу getCurrentPosition(), нужно воспользоваться следующим синтаксисом: navigator. geolocation.
GetCurrentPosition(function), где function — это пользовательская функция, роль которой — получить объект Position и обработать возвращенную информацию.
В коде из листинга 9.2 мы назвали такую функцию showinfo. Когда происходит вызов метода getCurrentPosition(), новый объект Position со всей необходимой информацией создается и отправляется функции showinfo(). Мы ссылаемся на этот объект внутри функции через переменную position, а затем с помощью той же переменной выводим сведения на экран.
У объекта Position есть два важных атрибута: coords и timestamp. В нашем примере для доступа к необходимой информации (широта, долгота и точность) мы используем только атрибут coords. Эти значения сохраняются в переменной data, а затем выводятся на экран в качестве нового содержимого элемента location.
Создайте файлы с фрагментами кода из листингов 9.1 и 9.2, загрузите их на свой сервер, а затем откройте HTML-документ в браузере. Когда вы щелкнете на кнопке, браузер запросит разрешение на активацию геолокационной системы для данного приложения. Если вы разрешите приложению обращаться к этой информации, на экране появится информация о значениях широты, долготы и точности определения координат.
Добавить комментарий