Отслеживание геолокации карт Google в реальном времени с помощью JavaScript (1/4)

  1. Отслеживание Google Maps Обзор учебника
  2. Настроить
  3. Настройка PubNub
  4. Настройка API Карт Google
  5. Обзор PubNub
  6. Обзор Карт Google
  7. Код прохождение
  8. Настройка и настройка приложения
  9. Выполнение кода
  10. Следующие шаги

🔔 Прежде чем мы начнем этот урок, зарегистрируйтесь в учетной записи PubNub для получения ключей API , У нас есть щедрый уровень песочницы, который вам ничего не будет стоить, пока не наступит время для масштабирования! 🔔

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

  • Смотрите, как ваш Uber или Lyft движутся к вам
  • Наблюдайте и выделяйте районы высокого риска для борьбы с болезнями
  • Следите за парком дронов
  • Отслеживание животных в охраняемом национальном парке

Отслеживание в реальном времени дает достаточно широкую сеть, а?

Отслеживание Google Maps Обзор учебника

Это учебное пособие, состоящее из четырех частей, по построению карт в реальном времени для веб-сайтов и мобильных устройств с использованием JavaScript API Карт Google и PubNub. Мы начнем с основ настройки вашего приложения, а затем добавим функции геолокации в реальном времени в частях 2-4.

В итоге у вас будет простое приложение для отслеживания местоположения в JavaScript с маркерами на карте, отслеживанием местоположения устройства и маршрутами полета на основе JavaScript API Google Maps и PubNub.

🔔 Прежде чем мы начнем этот урок,   зарегистрируйтесь в учетной записи PubNub для получения ключей API   ,  У нас есть щедрый уровень песочницы, который вам ничего не будет стоить, пока не наступит время для масштабирования

Настроить

Учебные активы

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

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

Мы предлагаем вам создайте бесплатный профиль пользователя CodePen здесь так что вы можете легко раскошелиться, изменить и сохранить ручки. Если вам удобно загружать HTML и обслуживать его с помощью другого механизма (например, Python SimpleHttpServer или облачной HTTP-доступной файловой службы), это тоже здорово! Ничто в коде не зависит от самого CodePen.

Настройка PubNub

Для начала вам понадобятся ключи PubNub для публикации и подписки. Если у вас нет учетной записи, вы можете подпишите здесь и ваши паб / суб ключи доступны в Панель администратора , Ключи выглядят как UUID и начинаются с префиксов «pub-c-» и «sub-c-» соответственно.

Получив ключи pub / sub, создайте новое приложение PubNub, которое будет представлять ваше приложение Android (и любые другие системы, взаимодействующие по тем же каналам). Приложение PubNub будет включать в себя ключи публикации и подписки, которые приложения могут использовать для указанных функций.

Настройка API Карт Google

Для интеграции с Google Maps вам необходимо создать ключ API Карт Google. Мы рекомендуем делать это, используя руководство по началу работы Вот. Это создает уникальный ключ API, который можно заблокировать для любых веб-приложений, которые вам нравятся. Начав создавать несколько проектов, вы можете управлять своими учетными данными в Консоль Google API здесь ,

Обзор PubNub

В этом примере приложения HTML5 и JavaScript PubNub предоставляет возможность связи в реальном времени, которая позволяет нашему веб-приложению получать входящие события при изменении положения удаленного объекта (широта и долгота).

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

Обзор Карт Google

Мы будем использовать JavaScript Google Maps API и HTML5 Map Widget для этого урока. Виджет карты HTML5 отображает карту района, который вы настраиваете. Размер карты, широта и долгота центра карты, уровень масштабирования, стиль карты и другие параметры могут быть настроены в соответствии с вашими первоначальными предпочтениями и обновлены на лету.

API Google Maps JavaScript предоставляет функцию обратного вызова инициализации, которая вызывает функцию, указанную при загрузке карты. Кроме того, мы будем использовать такие функции, как маркеры карты и полилинии, которые позволяют размещать дружественные маркеры карты а также траектории полета на карте в указанном месте (ах) (части 2, 3 и 4). Все точки определяются пользователем и могут обновляться в режиме реального времени по мере поступления обновлений.

Код прохождение

Чтобы работать с кодом, вам нужно внедрить его в свой собственный проект с помощью CodePen или загрузить код HTML в файл и запустить его на своем любимом HTTP-сервере. Нам нравится редактировать код в веб-среде CodePen следующим образом:

Нам нравится редактировать код в веб-среде CodePen следующим образом:

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

Настройка и настройка приложения

Структура веб-страницы должна быть знакома, если вы работали с веб-приложениями в прошлом. Мы начнем с простого приложения HTML5 + JavaScript, которое имеет тег DIV для отображения карты. Мы включаем библиотеку PubNub для связи в реальном времени в заголовок HTML-страницы.

<script src = "https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"> </ script>

Вы также захотите включить API Карт Google, используя тег SCRIPT внизу HTML-страницы. На момент написания, соответствующая версия 3.exp.

<script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_MAPS_API_KEY&callback=initialize"> </ script>

Обратите внимание, что вам необходимо заменить ключ API карт-заполнителей в атрибуте SCRIPT SRC соответственно выше.

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

Настройки PubNub включены в простую карту JavaScript. Вы можете обновить их своими собственными значениями следующим образом:

var pubnub = new PubNub ({publishKey: 'YOUR_PUB_KEY', subscribeKey: 'YOUR_SUB_KEY'});

Выполнение кода

Вам не нужно делать ничего особенного для запуска приложения в CodePen - оно запускается автоматически из онлайн-редактора. В зависимости от того, где вы просматриваете приложение (геолокация), а также от возможностей вашего соединения (WiFi или LTE), вы можете увидеть различные местоположения, о которых сообщалось (IP to geo против GPS location). Мы обнаружили, что разные устройства, а также разные браузеры имеют свои собственные характеристики точности определения местоположения, некоторые из которых более точны, чем другие.

Следующие шаги

Теперь у нас есть настроенное приложение. В Вторая часть, мы будем внедрять маркеры на картах , которые определяют, где устройство находится на карте.

Похожие

Разверните JavaScript QR-генератор кода в Google App Engine
Недавно я нашел отличный плагин jQuery jquery.qrcode.js , который написан Джером Этьен. В этой статье я хотел бы поделиться тем, как использовать плагин QR-кода для реализации бесплатного онлайн-приложения с Google App Engine. Вы можете попробовать мое демо http://dynamsoft-test.appspot.com/ ,
Обзор Sony Xperia Z2
Sony Xperia Z2 демонстрирует лучший потенциал камеры среди флагманов 2014 года с 20,7-мегапиксельной камерой G сзади, с одной светодиодной вспышкой чуть ниже. Я также провел время с камерой на Xperia Z3, и, хотя небольшое улучшение по сравнению с Z2, недостаточно, чтобы заслужить покупку самостоятельно. Sony обеспечивает дополнительную ширину на объективе и лучшую производительность при слабом освещении на Z3, но обе настройки занимают много времени. Вернувшись к Z2, вы
Добавить Google Analytics в Blogger
Чтобы добавить Google Analytics в Blogger, необходимо добавить домашнюю страницу блога в свою учетную запись Google Analytics, как и любые другие веб-сайты или домены в Google Analytics. Затем вам нужно вставить код отслеживания Google Analytics в свою учетную запись Blogger. В этом руководстве мы покажем вам два разных способа добавления Google Analytics в учетные записи Blogger.
Мобильные приложения против смога
... карте. Мобильные приложения против смога - Загрязнение воздуха Представленные приложения, безусловно, самые простые в использовании - если вам не нравятся графики и вам нужна только быстрая информация о текущем состоянии, это определенно для вас. После выбора соответствующих станций на карте или в раскрывающемся списке мы можем увидеть все на одном экране вместе с
Cool Stuff: 100 лет съемочной площадки из лучших 2000 фильмов на Google Maps - / Film
... google-maps-film-1.jpg" alt="Был ли один из 2000 лучших фильмов, выпущенных в прошлом столетии, снят рядом с местом, где вы живете"> Был ли один из 2000 лучших фильмов, выпущенных в прошлом столетии, снят рядом с местом, где вы живете? В прошлом эта информация, вероятно, передавалась бы старым газетным статьям, и на ее поиск уходили часы. Теперь, благодаря таким сайтам, как база данных фильмов в Интернете, есть списки мест съемки (с различной точностью), доступных практически для любого
Обзор Asus Zenfone 3 Laser ZC551KL
В то время как Zenfone 3 является флагманским устройством для Asus, у компании есть история создания сопутствующих устройств, которые приносят большую часть языка дизайна и популярных функций по
Как настроить яркость экрана в Windows 10
Один из более спорные изменения, которые пришли с Windows 10 был новый способ, которым операционная система обрабатывает яркость экрана. До этого момента пользователям Windows предоставлялся ползунок, в той или иной форме, который позволял настраивать яркость экрана устройства в любой степени, которую хотел пользователь.
Лучший HTML в PDF PHP API
Скачать и запустить легко PDF Action Center , Выберите PHP в качестве языка. Выберите HTML в качестве исходного типа файла. Выберите функции, которые вы хотите в вашем PDF.
Настройка браузеров
PhpStorm поставляется с предопределенным списком наиболее популярных браузеров, которые вы можете автоматически устанавливать и запускать из IDE во время работы, отладки или для предварительный просмотр вывода файла HTML , PhpStorm предполагает, что вы устанавливаете браузеры в соответствии со стандартной процедурой, и присваивает каждой установке псевдоним, который обозначает путь по умолчанию
• Вставить Google Map для веб-сайта - копировать и вставлять!
... Google - это самый популярный картографический онлайн-сервис с интерактивным масштабированием и панорамированием, маршрутами, деталями местоположения, спутниковыми видами и панорамными панорамными изображениями на уровне улицы. Он имеет плавный, простой в использовании интерфейс, который регулярно пополняется новыми функциями. Одна из причин, по которой карты стали такими вездесущими, заключается в том, что они дают возможность любому пользователю встроить карту в свой собственный веб-сайт.
Обзор GarageBand 2.0 для iOS: больше треков, несколько настроек
Если вы читали наш обзор GarageBand 10.0 для Mac OS (и действительно, вы должны), вы знаете, что Apple внесла много изменений в версию для Mac этого почтенного музыкального приложения. Этого нельзя сказать о последней версии GarageBand для iOS, которая работает почти так же, как

Комментарии

Безопасны ли платежи с помощью бесконтактных карт?
Безопасны ли платежи с помощью бесконтактных карт? Да. Микропроцессор, размещенный на карте, обеспечивает высочайший уровень безопасности. При бесконтактной оплате карта активируется только на несколько секунд по явному указанию платежного терминала и работает только на очень коротком расстоянии от считывателя (до 5 см). Невозможно перехватить информацию, предоставленную таким образом. Дополнительной защитой является ограничение общей суммы бесконтактных транзакций, запрограммированных
Скоро "из мыши" для Google Maps?
Скоро "из мыши" для Google Maps? Запишите пробег с My Tracks Apple сверлит картографические данные в iOS 8 Maps (и iTunes Radio) Карты Google для iOS: более 10 миллионов загрузок за 2 дня
Вы помните, как видели этот кусок кода в вашем сбросе CSS?
Вы помните, как видели этот кусок кода в вашем сбросе CSS? статья, в стороне, подробности, figcaption, рисунок, нижний колонтитул, заголовок, hgroup, nav, раздел, сводка {display: block; } Это добавлено для старых браузеров (например, IE6-8), которые не распознают новые элементы HTML5. По умолчанию во всех браузерах все неизвестные элементы имеют вычисленное значение отображения «inline». Вот JS Bin
А как выглядит работа кода BLIK?
А как выглядит работа кода BLIK? Независимо от того, платите ли вы за покупки или снятие наличных в банкомате, схема и последовательность действий идентичны. Сначала сообщите продавцу о намерении произвести платеж BLIK / выберите вариант транзакции BLIK на панели банкомата, а затем: Запустите мобильное приложение на своем смартфоне; Сгенерируйте код, нажав опцию BLIK; Введите полученный код в пункте приема - терминале оплаты, банкомате или на сайте
Библиотеки Vulkan Run Time - новый конкурент Что такое библиотеки времени выполнения Vulkan в Windows?
Что такое библиотеки времени выполнения Vulkan в Windows? Что такое библиотеки времени выполнения Vulkan в Windows? Увидеть библиотеки Vulkan Run Time на вашем компьютере и спросить, что же это за мир? Вот все, что вам нужно знать о Вулкане. Прочитайте больше которые предлагают повышенную производительность. Какая версия
Зачем вставлять Карты Google на свой сайт?
Зачем вставлять Карты Google на свой сайт? Вы можете добавить карту Google на свой сайт, которая будет содержать пин-код, брошенный по адресу местоположения. Это полезно для вашего бизнеса, но также может использоваться блоггерами, рецензентами и другими веб-сайтами, которые обсуждают конкретные заведения. Их также можно использовать для более общих обзоров района или района. Встраивание карты Google предлагает вашим посетителям множество преимуществ.
Как узнать свой идентификатор веб-ресурса Google Analytics?
Как узнать свой идентификатор веб-ресурса Google Analytics? Войдите в свою учетную запись Google Analytics, вы можете найти идентификатор веб-ресурса Google Analytics на странице администратора >> столбец свойств, см. Скриншот ниже. Вышеуказанный метод - это самый простой способ добавить Google Analytics в блоги Blogger. Так же, как добавление Google Analytics на другие веб-сайты
Как изменить домен своего магазина, чтобы не потерять свою позицию в результатах поиска Google?
Как изменить домен своего магазина, чтобы не потерять свою позицию в результатах поиска Google? В одной из последних работ я показал, с какими трудностями мы можем столкнуться при Миграция WordPress , Основной проблемой при миграции этого программного обеспечения были жестко закодированные пути в базе данных SQL. В случае магазинов на базе PrestaShop проблема практически идентична. Здесь также вся миграция сводится к изменению
Видят ли роботы Google подстраницу как пользователь?
Видят ли роботы Google подстраницу как пользователь? Внутренние ссылки - я нацеливаю самые большие ссылки на ключевые подстраницы? Вышеуказанные параметры могут быть проверены путем проверки страницы в бесплатном инструменте Google Search Console поделился с Google. Инструмент предлагает дополнительные функции, такие как информация о наложенных штрафах, список ссылок, указывающих на веб-сайт или раздел, поддерживающий
Знаете ли вы, что с Google, вы можете теперь искать изображения очень эффективно?
Знаете ли вы, что с Google, вы можете теперь искать изображения очень эффективно? Вместо описательного текста вы напрямую вводите изображение для сравнения. Хотя эта функция очень незаметна и активна не во всех браузерах, она работает с Internet Explorer и Mozilla Firefox. Лоренц Хёльшер покажет вам, как использовать этот поиск изображений. «Нормальный» поиск изображений Google уже очень эффективен в поиске изображений без новых функций. Предположим,

Com/maps/api/js?
Безопасны ли платежи с помощью бесконтактных карт?
Скоро "из мыши" для Google Maps?
Вы помните, как видели этот кусок кода в вашем сбросе CSS?
А как выглядит работа кода BLIK?
Что такое библиотеки времени выполнения Vulkan в Windows?
Что такое библиотеки времени выполнения Vulkan в Windows?
Увидеть библиотеки Vulkan Run Time на вашем компьютере и спросить, что же это за мир?
Зачем вставлять Карты Google на свой сайт?

Добро пожаловать , Гость !

Мы настоятельно рекомендуем Вам зарегистрироваться, если вы ещё этого не сделали. регистрация откроет Вам новые функции.

Войти или Зарегистрироваться

www.silvio-berluskoni.ru © Все права защищены © 2016.