Полное руководство по отслеживанию геолокации через JavaScript для начинающих

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

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

Наблюдайте за тем, как Uber или Днае едет к вам

Просматривайте и подсвечивайте области повышенного риска для лечения болезни

Мониторинг парка беспилотников

Отслеживайте животных в охраняемых национальных парках

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Обзор урока

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

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

В конце вы получите базовое приложение с отслеживанием локации через JS с маркерами карты, отслеживанием локации устройства и маршрутами полетов. Все это под управлением JavaScript Google Maps API и PubNub.

Файлы урока

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

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

У вас должен быть бесплатный профиль на CodePen для копирования, изменения и сохранения демо. Также можно скачать HTML и предоставлять его с помощью другого механизма (Python SimpleHttpServer или облачный файловый сервер с доступом к HTML)! Весь код независим от CodePen.

Часть 1: настройка JavaScript, Google Maps API и PubNub Setup

Настройка окружения и регистрация в сервисах Google Maps и PubNub.

Настройка PubNub

Для начала нужно получить ключи публикации и подписки PubNub. Если у вас нет профиля, можете зарегистрироваться здесь. Ключи доступны в Admin Dashboard.

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

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

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

После создания нескольких проектов управлять учетными данными можно в Google API console.

Обзор PubNub

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

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

Обзор Google Maps

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

Google Maps JavaScript API предоставляет опцию колбек инициализации, которая вызывает функцию, указанную при загрузке карты.

Также будем использовать функции типа Map Markers и Polylines, которые позволяют размещать дружелюбные маркеры и маршруты полетов на карте в заданной локации(ях) (часть 2,3 и 4). Все точки задаются пользователем и могут обновляться в реальном времени при получении этих обновлений.

Работа с кодом

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

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

В IDE можно внести небольшие правки в код и быстро запустить приложение.

Создание и настройка приложения

Если вы уже работали с веб-приложениями, то структура веб-страницы вам будет знакома. Начнем с чистого HTML5+JS приложения, в котором карта отображается в теге DIV. Подключим в head страницы библиотеку PubNub.

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

Также нужно подключить Google Maps API через тег 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 подключаются внутри простой JS карты. Можете обновить ее своими значениями:

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

Запуск кода

Для запуска приложения в CodePen не нужно ничего делать – оно автоматически запускается из онлайн редактора.

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

Часть 2: маркеры карты

Реализация маркеров карты для определения положения устройства на карте.

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

Что такое маркеры карты?

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

С помощью маркеров определяется положение пользователя или устройства на карте. Для начала разместим на карте один маркер и случайно обновим его положение.

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

Начнем с чистого HTML5 приложения и подключим PubNub библиотеку для взаимодействий в реальном времени, а также Bootstrap CSS для стилей.

<!doctype html>
<html>
  <head>
 <title>Google Maps Tutorial</title>
 <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
<body> 

Если вам интересно, где подключен Google Maps API – в самом конце HTML5 страницы. Так коду карты будет доступен весь DOM.

Создадим DIV для приложения, а внутри него еще один DIV для карты. Ширину и высоту пропишем через инлайн CSS.

В реальном приложении лучше определить стили в отдельном файле. Именно это мы имели в виду, когда говорили, что хотим подключить скрипт Google Maps после определения DOM элемента canvas.

<div class="container">
  <h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
  <div id="map-canvas" style="width:600px;height:400px"></div>
</div> 

Осталось разобрать кучу JS кода. Давайте по порядку.

Широта/долгота

Установим первичную широту и долготу на Сан Франциско. Затем определим функцию, которая дает точку на круге, основанную на текущем времени. Определим радиус (в градусах).

Воспользуемся тригонометрией – точка на круге задается через x = «начальная долгота плюс косинус времени ввода радиуса», и y = «начальная широта плюс синус входного времени радиуса». Для удобства будем возвращать JS объект с этими значения широты и долготы.

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function circlePoint(time) {
  var radius = 0.01;
  var x = Math.cos(time) * radius;
  var y = Math.sin(time) * radius;
  return {lat:window.lat + y, lng:window.lng + x};
}; 

Сдвиг положения маркера карты

Закончили с математикой, перейдем к приятному. Определим карту и переменные для хранения карты и объектов маркеров, чтобы иметь возможность ими манипулировать налету при поступлении событий PubNub.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Затем определим колбек инициализации, который Google Maps JavaScript API может вызывать после загрузки. Чтобы колбек был доступен API, он должен принадлежать объекту window.

var map;
var mark;
var initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize; 

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

В первой части функции устанавливаем новые значения широты и долготы из сообщения. Затем запускаем подходящие методы на объектах карты и маркера для обновления позиции и повторного центрирования карты.

var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
}; 

Подключение карты к PubNub

Мы определили колбеки. Теперь у нас есть все необходимые механизмы, и мы можем перейти к инициализации функциональности PubNub стриминга данных в реальном времени.

Во-первых, необходимо определить название канала, который будет ожидать обновления позиции. Далее инициализируем библиотеку PubNub с помощью ключей публикации и подписки, которые мы настроили в части 1.

В конце мы указываем библиотеке PubNub подписку на соответствующий канал и прикрепляем функцию redraw, как обработчик входящих событий.

Вы спросите, а что создает эти события?

var pnChannel = "map-channel";
var pubnub = new PubNub({
  publishKey: 'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw}); 

Для этого простого урока зададим базовый JS таймер публикации новых позиций на основе текущего времени. Каждые 500 миллисекунд будем запускать анонимную колбек функцию, которая публикует новый объект с широтой/долготой (создается через вызов circlePoint()) в определенном канале PubNub.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script> 

Инициализация Google Maps

Последнее, но не менее важное – инициализируем Google Maps API в самом конце, чтобы успели загрузиться DOM элементы, и выполниться предварительные условия JS.

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

Наше JS приложение работает, и мы можем устанавливать маркеры на карте.

Часть 3: живое отслеживание положения

Движение маркеров на карте в реальном времени на основе положения устройства.

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

Что такое отслеживание геолокации?

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

Будем собирать локацию пользователя с его устройства с помощью HTML5 location API, стримить и публиковать изменения локации (на основе того, как устройство само оценивает свое положение) на карту с помощью PubNub Realtime Messaging.

Разбор кода

У нас есть DIV для приложения и DIV для карты. Это мы задали в предыдущей части. Пора использовать HTML5 location API для обновления нашего положения в реальном времени.

HTML5 Location API

Давайте по порядку. Сперва мы настраиваем первичную широту и долготу на Сан-Франциско.

Затем создаем функции для получения локации устройства с помощью HTML5 location API и обновления переменных положения в браузере. Мы задали внутренний таймер для периодического получения локации устройства. Для удобства создадим возвращаемый JS объект со теми значениями широты и долготы.

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(updatePosition);
 }
 return null;
};
function updatePosition(position) {
  if (position) {
 window.lat = position.coords.latitude;
 window.lng = position.coords.longitude;
  }
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
  return {lat:window.lat, lng:window.lng};
}; 

ОК, с HTML5 локацией разобрались. Перейдем к десерту.

Живая локация

Мы определили переменные карты и маркера для хранения объектов карты и маркера, чтобы манипулировать ими налету при поступлении событий PubNub.

Затем мы определили колбек инициализации, который Google Maps JavaScript API вызывает после загрузки и проверяет, чтобы он был в объекте window, чтобы API имел к нему доступ.

var map;
var mark;
var initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize; 

Далее мы определяем обработчик события redraw, который вызываем при получении налету нового события об изменении положения. В первой части функции мы задаем новые значения широты и долготы из сообщения.

Затем запускаем подходящие методы на объектах карты и маркера для обновления положения и повторного центрирования карты.

var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
}; 

Мы определили колбеки. Теперь у нас есть все необходимые механизмы, и мы можем перейти к инициализации функциональности PubNub стриминга данных в реальном времени.

Во-первых, необходимо определить название канала, который будет ожидать обновления позиции. Далее инициализируем библиотеку PubNub с помощью ключей публикации и подписки, которые мы настроили в части 1.

В конце мы указываем библиотеке PubNub подписку на соответствующий канал и прикрепляем функцию redraw, как обработчик входящих событий. Вы спросите, а что создает эти события? Читайте дальше!

var pnChannel = "map2-channel";
var pubnub = new PubNub({
  publishKey: 'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw}); 

Публикация широты/долготы

Для этого простого урока зададим базовый JS таймер публикации новых позиций на основе текущего времени. Каждые 5000 миллисекунд будем запускать анонимную колбек функцию, которая публикует новый объект с широтой/долготой (создается через вызов currentLocation ()) в определенном канале PubNub.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script> 

Последнее, но не менее важное – инициализируем Google Maps API в самом конце, чтобы успели загрузиться DOM элементы, и выполниться предварительные условия JS.

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

Часть 4: маршруты полета

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

Полное руководство по отслеживанию геолокации через JavaScript для начинающих

Что такое маршруты полета?

В этом уроке добавим маршруты полета через Polylines. Они позволяют динамически рисовать обновленные пути по заданным пользователем точкам на карте в вебе или мобильном браузере.

Для демо разместим один polyline и обновим его конечную точку налету на основе случайного положения внутри границы.

Обзор кода

Мы настроили DIV для приложения и DIV для карты в предыдущем уроке. Теперь добавим маршруты полета. Приступим к делу.

Определим переменные map, mark и lineCoords для хранения объектов карты, маркера и координат polyline , чтобы манипулировать ими налету при поступлении событий PubNub.

Затем мы определили колбек инициализации, который Google Maps JavaScript API вызывает после загрузки и проверяет, чтобы он был в объекте window, чтобы API имел к нему доступ.

var map;
var mark;
var lineCoords = [];
var initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize; 

Широта/долгота

Далее мы определяем обработчик события redraw, который вызываем при получении налету нового события об изменении положения. В первой части функции мы задаем новые значения широты и долготы из сообщения.

Затем запускаем подходящие методы на объектах карты, маркера и polyline для обновления положения, добавления его в конец линии и повторного центрирования карты.

var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
  lineCoords.push(new google.maps.LatLng(lat, lng));
  var lineCoordinatesPath = new google.maps.Polyline({
 path: lineCoords,
 geodesic: true,
 strokeColor: '#2E10FF'
  });
  lineCoordinatesPath.setMap(map);
}; 

Инициализация PubNub

Мы определили колбеки. Теперь у нас есть все необходимые механизмы, и мы можем перейти к инициализации функциональности PubNub стриминга данных в реальном времени.

Во-первых, необходимо определить название канала, который будет ожидать обновления позиции. Далее инициализируем библиотеку PubNub с помощью ключей публикации и подписки, которые мы настроили в части 1.

В конце мы указываем библиотеке PubNub подписку на соответствующий канал и прикрепляем функцию redraw, как обработчик входящих событий. Вы спросите, а что создает эти события? Читайте дальше!

var pnChannel = "map3-channel";
var pubnub = new PubNub({
  publishKey: 'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw}); 

Публикация широты/долготы

Для этого простого урока зададим базовый JS таймер публикации новых позиций на основе текущего времени. Каждые 500 миллисекунд будем запускать анонимную колбек функцию, которая публикует новый объект с широтой/долготой (движение на северо-восток) в определенном канале PubNub.

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

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);
</script> 

Последнее, но не менее важное – инициализируем Google Maps API в самом конце, чтобы успели загрузиться DOM элементы, и выполниться предварительные условия JS.

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

Можете гордиться, мы закончили!

PubNub и Google Maps API отлично работают вместе. Google Maps предоставляет мощные функции с картами, а PubNub подключает их к устройствам в реальном времени.

Автор: Joe Hanson

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree