Использование возможностей HTML5 и Apache Cordova для доступа к ресурсам мобильного устройства

API геолокации для определения своего местоположения

API геолокации находится внутри объекта navigator, входящего в набор средств HTML5, и содержит всего три метода:

• getCurrentPosition() - получение информации от GPS мобильного устройства;
• watchPosition() - аналогичен getCurrentPosition(). Отличие заключается в том, что первый метод выполняет операцию один раз, в то время как watchPosition() автоматически возвращает новые данные при каждом изменении местоположения мобильного устройства, и таким образом будет немедленно сообщать о любых передвижениях пользователя;
• clearWatch() - отменяет процесс watchPosition().

Методы watchPosition и clearWatch - парные, watchPosition возвращает уникальный идентификатор, который передается методу clearWatch, когда необходимо сбросить определенное отслеживание.

Как уже сообщалось, методы getCurrentPosition и watchPosition очень похожи; они принимают одинаковые аргументы:

• обработчик успешного исполнения;
• обработчик ошибки;
• параметры геолокации.

Самый простой вариант использования API геолокации - передать методу getCurrentPosition обработчик успешного исполнения, например с использованием вот такой JavaScript - функции:

function geo() {
    LocationMaster = new Object();
    LocationMaster.lookUpPosition = function (position) {
        this.latNow = position.coords.latitude;//широта
        this.longNow = position.coords.longitude;//долгота
        document.getElementById("rezult").innerHTML = "Широта=" + this.latNow + ",Долгота=" + this.longNow 
    }
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
    }
    else {
        document.getElementById("rezult").innerHTML = "Не поддерживается геолокация";
    }
        }

Обращение с ней на странице Cordova - проекта:

<input type ="button" id ="btn_geoloc" value="ГЕОЛОКАЦИЯ" onclick = "geo();" />

Результат выполнения в эмуляторе:

Рис. 15.3.

Объект, передаваемый методом getCurrentPosition() в функцию обратного вызова, кроме широты и долготы, по спецификации может содержать еще ряд полезных вещей. Прежде всего, это объект position.coords, содержащий географические координаты:

• position.coords.latitude - отвечает за широту местонахождения пользователя;
• position.coords.longitude - отвечает за долготу местонахождения пользователя;
• position.coords.altitude - высота над земной поверхностью;
• position.coords.accuracy - точность местоположения в метрах, этот параметр может сильно разниться в зависимости от способа вычисления координат, мобильные устройства дают разброс от 10 м до километра;
• position.coords.latitudeAccuracy - указывает погрешность в определении высоты;
• position.coords.heading - направление движения в градусах, указывается по часовой стрелке от севера;
• position.coords.speed - как нетрудно догадаться, скорость движения;
• position. Timestamp - дата замера.

Естественно, геолокация предназначена в первую очередь для мобильных устройств - задача определять координаты стационарного компьютера возникнет редко, а мобильным устройствам свойственно, соответственно названию, время от времени изменять свое местоположение. Причем иногда это изменение непрерывно (например, движущийся транспорт).

Важнейшими атрибутами объекта geolocation являются атрибуты latitude (широта) и longitude (долгота). С их помощью можно загрузить карту местонахождения мобильного устройства. В HTML5 возможно, к примеру, отображение карт сервиса Google Maps. URL-адрес этой функции выглядит так:

" http://maps.google.com/maps?hl=en&ie=UTF8&ll= " + latitude + ", " + longitude + 
"&spn=0.054166,0.110378 &z=13&output=embed"

Переменные latitude и longitude содержат значения координат. Таким образом, все дело в том, чтобы извлечь эти значения широты и долготы и разместить их в нужном месте страницы (например, в теге <iframe>). И для получения карты нужно всего лишь вставить эти значения в запрос карты. В JavaScript - программу необходимо будет после вычисления долготы и широты добавить следующую строку:

document.getElementById("mapHolder").src = "http://maps.google.com/maps?hl=en&ie=UTF8&ll=" + this.latNow + "," + 
this.longNow + "&spn=0.054166,0.110378&z=13&output=embed";

В этом случае идентификатор ID ="mapHolder" относится к элементу <iframe>. Тогда карта является объектом, вызываемым по ссылке, и загрузится во фрейм как изображение.

Результат выполнения JavaScript-кода получения карты (в браузере Internet Explorer):

Рис. 15.4.

Далее приводится полная разметка страницы, содержащая тег <iframe> вывода карты [4]:

<!DOCTYPE html >
<html lang="ru">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* BF7F6C,FFDDAE,B59D7B,40372B,E6C79C */
body {
	font-family:Verdana, Geneva, sans-serif;
	color:#40372B;
	background-color:#FFDDAE;
}
h1 {
	text-align:center;
	background-color:#FFDDAE;
	color:#B59D7B;
h3 {
	font-family:Tahoma, Geneva, sans-serif;
	color:#BF7F6C;
}
</style>
<script>
	LocationMaster=new Object();
	LocationMaster.lookUpPosition=function(position)
	{
		this.latNow=position.coords.latitude;
		this.longNow=position.coords.longitude;
            
		document.getElementById("mapHolder").src = "http://maps.google.com/maps?hl=en&ie=UTF8&ll=" + 
this.latNow + "," + this.longNow + "&spn=0.054166,0.110378&z=13&output=embed";
	}

        if (navigator.geolocation) 
		{
            navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
        } 
		else 
		{
            alert("Попробуйте воспользоваться другим браузером HTML5. Текущий браузер не поддерживает геолокацию.");
        }
    </script>
<title>Мобильная карта</title>
    </head>
    <body>
    <article>
      <header>
        <h3>Вы здесь</h3>
      </header>
      <section>
        <iframe id="mapHolder" width="240" 
     height="320"> </iframe>
      </section>
      <section>
        <p> Для пользователей мобильных устройств </p>
      </section>
      <section>
        <p>
        <h1> Увеличить здесь</h1>
        </p>
        <p>
        <h1> и здесь </h1>
        </p>
        <p>
        <h1> Тянуть вправо или влево, но не вниз </h1>
        </p>
      </section>
    </article>
</body>
</html>