31 день Windows 8 для HTML5 | День № 14 Геолокация

Эта статья посвящена Дню № 14 из 31-й серии Windows 8 . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .

Сегодня мы поговорим о геолокации. Знание местоположения пользователя (или, точнее, устройства) делает каждое приложение и его взаимодействие с пользователем лучше. Вот несколько примеров того, как:

Линия бизнес-приложений

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

Игры

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

Карты

Duh. Мы сделаем это как часть примера кода сегодня.

Путешествовать

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

Упражнение

Есть множество приложений для отслеживания маршрута тренировки. Думайте, бегаете, ездите на велосипеде и т. Д. Очевидное применение геолокации к этим приложениям — это возможность отобразить маршрут, который вы выбрали во время путешествий. Однако более важным, и я думаю, что эта ответственность, вероятно, ложится на самих производителей мобильных ОС, является способность распознавать аварии. В среднем 4500 велосипедистов в год становятся жертвами наездовгде они остаются травмированными (или хуже) на обочине дороги. В современном мире почти у каждого есть свой телефон, даже когда он бежит или катается на велосипеде. Представьте, что ваш телефон способен распознавать сильные удары (с использованием данных акселерометра или гироскопа), после которых вообще не происходит никаких движений. После 30 секунд бездействия ваш телефон предложит вам позвонить 911 и отправить текстовые сообщения в предварительно выбранный список контактов с сообщением SOS и вашим местоположением. Еще через 30 секунд он немедленно отправляет эту информацию и набирает 911. Эта функция может спасти жизни, так как многие из этих велосипедистов погибают без нужды только потому, что никто не знает, где они находятся. Извините за то, что так болезненно, но это важная вещь, чтобы думать.

Как видите, всегда есть способ получить данные о местоположении и сделать ваше приложение еще лучше. Кроме того, если вам нравятся мои идеи выше, вы можете их украсть. Скорее всего, я никогда не буду создавать какие-либо из этих приложений Для этого должно быть 48 часов в день.

Геолокация и браузер

Геолокация — довольно новая спецификация в нашем мире Интернета, но тем не менее захватывающая. Конечно, когда вы думаете о геолокации в браузере на нашем ноутбуке, сценарии немного отличаются. Я имею в виду, в конце концов, мы не собираемся привязывать ультрабук за 1 тысячу долларов к нашему рукаву и продолжаем бежать Таким образом, мы обычно думаем о ком-то, кто использует это за своим столом, где бы это ни было.

Но это не значит, что геолокация не была необходимой функцией. Если вы Yelp и ваши пользователи ищут ресторан в радиусе 25 миль, с какой стати вы спросите их, где они находятся? Хорошо, может быть, есть сценарий, когда они на работе и хотят найти место в 25 милях от своего дома, но вы меня поняли.

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

В любом случае, это все важно, и, как мы видели в этой серии статей как веб-разработчики, у нас есть этот уникальный набор навыков, который применим как в мире приложений », так и в« мире Интернета ». Итак, начнем.

Обновление нашего манифеста

К счастью, получить наши данные о геолокации довольно легко, и, как обычно, мы должны объявить, что Location — это одна из наших возможностей, чтобы использовать их. Для этого откройте раздел «Возможности» вашего файла package.appxmanifest и установите флажок «Расположение».

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

Получение наших данных геолокации

В этом примере я создал приложение, которое постоянно отслеживает местоположение устройства. Первое, что меня смутило в этом процессе, это то, как попросить пользователя разрешить отслеживать его местоположение в приложении. Если вы помните, в приложении « День блокировки экрана № 11» нам приходилось явно запрашивать у пользователя разрешение на доступ к экрану блокировки. С Location, однако, мы этого не делаем. Простой способ доступа к данным подскажет пользователю от вашего имени. Чтобы получить доступ к позиции пользователя, нам нужно будет создать объект Geolocator из WinRT, а затем запросить позицию пользователя. Я только что обернул это в функцию, которую я назначу кнопке для демонстрационных целей.

function getlocation() {

    if (_geolocator == null) {
        _geolocator = new Windows.Devices.Geolocation.Geolocator();
    }

    if (_geolocator != null) {
        //this call will also ask the user for permission to their location
        _geolocator.getGeopositionAsync().then(getPosition);
    }
}

Как видите, получить доступ к Geolocator в WinRT очень просто. Затем мы можем запросить позицию пользователя и передать ей функцию для выполнения, как только она у нее появится. Как вы можете видеть из нашего комментария, когда мы запрашиваем позицию пользователя, Windows (в первый раз) запросит у пользователя доступ, чтобы узнать его местоположение.

Теперь это не постоянная вещь. Пользователь может зайти в настройки приложения и отключить разрешение на локацию. На самом деле вы должны следить за этим сценарием.

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

function getPosition(position) {
    _lat.innerText = position.coordinate.latitude;
    _long.innerText = position.coordinate.longitude;
    _accuracy.innerText = position.coordinate.accuracy;
}

Подождите, но эта вещь HTML5 …

Итак, подождите, у нас уже есть геолокация в HTML5, разве это не работает? Microsoft готовит свою собственную вещь здесь? Нет. Давайте быстро посмотрим на путь HTML5. Честно говоря, это так же, как то, что мы делали с WinRT, просто разные API. Ключевое отличие в том, что мы идем к нашему объекту навигации из окна, а не к WinRT.

function getHtml5Location() {
    if (navigator == null)
        navigator = window.navigator;

    var geolocation = navigator.geolocation;
    if (geolocation != null)
        //this call with prompt for access.
        geolocation.getCurrentPosition(positionCallback);
}

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

function positionCallback(position) {
    _lat.innerText = position.coords.latitude;
    _long.innerText = position.coords.longitude;
    _accuracy.innerText = position.coords.accuracy;
}

Итак, вопрос на миллион долларов: почему их два, и какой вы используете? Ну, есть два просто потому, что WinRT проецируется на все языки, включая JavaScript, и поскольку эти API должны быть доступны для других языков, то JavaScript тоже это понимает. Так какой? Ну, на данный момент я не уверен, что это действительно имеет значение. Если вы хотите кросс-платформенный код JavaScript, то я бы придерживался пути HTML5. Если вы хотите использовать нативный API для всех языков, то, возможно, WinRT — ваш ответ. Честно говоря, я не знаю, имеет ли это значение. Для остальной части этой статьи я просто собираюсь

но я двигаюсь …

На данный момент мы успешно запросили данные о нашем местоположении и получили их, но что, если мы двигаемся, и положение меняется или, что еще лучше, меняется статус нашего GPS.

На данный момент я кормить необходимость потушить отказ от ответственности.

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

Как вы уже догадались, ответ здесь — события. Есть два разных события, на которые мы можем зарегистрироваться; positionChanged и statusChanged. Давайте посмотрим на каждого.

событие positionChanged

Прежде чем мы вызвали getGeppositionAsync, чтобы получить данные о нашем местоположении, например:

_geolocator.getGeopositionAsync().then(getPosition);

Это был однократный вызов, который вернул нам некоторые координатные данные (те же самые координатные данные, о которых мы поговорим более подробно). Но это был однократный асинхронный вызов. Что если мы хотим, чтобы позиция пользователей изменилась? Что ж, вместо того, чтобы вызывать данные о координатах, мы просто подключим их к событию и сделаем так:

_geolocator.addEventListener("positionchanged", onPositionChanged)

Как и любой обработчик событий, который вы подключали в прошлом, то же самое верно и здесь. при срабатывании positionchange вызовет мою функцию onPositionChanged. Теперь, когда моя функция вызывается, немного другой объект пропускается. это объект аргумента с позицией, а не только с той позицией, через которую он проходит. Итак, давайте немного изменим код, чтобы легко учесть оба сценария.

//called by my event handler that we wired
function onPositionChanged(args) {
    displayPosition(args.position);
}

//called by a button who called getGeopositionAsync()
function getPosition(position) {
    displayPosition(position);
}

//displays on screen
function displayPosition(position) {
    _lat.innerText = position.coordinate.latitude;
    _long.innerText = position.coordinate.longitude;
    _accuracy.innerText = position.coordinate.accuracy;
}

Вы заметите, что я изменил свои функции так, что я могу использовать некоторые из них немного лучше.

Теперь этот объект, через который прошел, имеет, откуда все эти данные о местоположении, такие как долгота, широта и точность, как вы уже видели. Если вы посмотрите немного ближе на этот класс Geocoordinate, то увидите, что на самом деле данных на нем гораздо больше, таких как:

• Точность — это измерение в метрах радиуса круга, в котором нашей широтой и долготой являются центральные точки. Как это:

• Отметка времени — это фактическое время, когда было прочитано значение Location. Это включает в себя информацию о часовом поясе, поэтому вам придется конвертировать время, чтобы хранить все в UTC.
• Высота — это высота устройства в метрах. Вероятно, это можно найти только в устройствах с барометром (мы рассмотрим датчики позже в этой серии), но это ценная информация, если вы сможете ее получить.
• AltitudeAccuracy точно так же, как и наше другое значение Accuracy, за исключением того, что это просто предел погрешности для значения Altitude. Это означает, что вы + или — это много метров.
• Направление также будет отображаться только с соответствующим датчиком, компасом. Это меры в градусах относительно истинного севера.
• Технически скорость можно рассчитать, отслеживая значения долготы / долготы во времени, но они сделали ее невероятно простой для нас. Он измеряется в метрах / секунду, но это необязательное значение, которое может предоставить датчик GPS устройства. Это означает, что не все устройства будут возвращать значение.

_geolocator.removeEventListener("statuschanged", onStatusChanged);

function getStatusString(locationStatus) {
    var posStatus = Windows.Devices.Geolocation.PositionStatus;

    switch (locationStatus) {
        case posStatus.ready:
            return "ready";
            break;

        case posStatus.initializing:
            return "initializing";
            break;

        case posStatus.noData:
            return "noData";
            break;

        case posStatus.disabled:
            return "disabled";
            break;

        case posStatus.notInitialized:
            return "notInitialized";
            break;

        case posStatus.notAvailable:
            return "notAvailable";
            break;

        default:
            return "Unknown status.";
    }
}

function stopGetPosition() {
    if (_geolocator) {
        _geolocator.removeEventListener("positionChanged", onPositionChanged);
        _geolocator.removeEventListener("statuschanged", onStatusChanged);
    }
}