Отслеживание в реальном времени с помощью карты Google и PubNub

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

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

Есть определенные шаги, которые сделают это проще !!

Шаг 1. Получите местоположение водителя с помощью геолокации HTML.
Шаг 2. Опубликуйте местоположение с помощью библиотеки PubNub JavaScript.
Шаг 3. Получите опубликованное местоположение на странице клиента с помощью PubNub.

Шаг 1. Получение местонахождения водителя

function getLocation(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successHandler,errorHandler,{maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
    } else {
        alert("Geolocation is not supported by your browser.");
    }
}

Здесь мы использовали службу определения местоположения по умолчанию в браузере. Функция getCurrentPosition принимает аргументы, которые полезны для обработки ответа. Для успешного доступа GPS / чтения местоположения используется (successHandler), а если мы не можем получить местоположение браузера, используется (errorHandler).

function successHandler(response){
    window.latitude = response.coords.latitude;
    window.longitude = response.coords.longitude;
}
function errorHandler(error){
    console.log(error);
}

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

То же самое и с функцией обработчика ошибок. Он получает аргумент, содержащий данные об ошибке.

Шаг 2. Опубликуйте местоположение драйвера с помощью PubNub

PubNub предоставляет возможность публиковать данные и подписываться на них в режиме реального времени. Эта функция возможна с использованием node / socket.io или любого стороннего пакета, который предоставляет возможность публикации данных в реальном времени без обновления страницы.

Включите jQuery и библиотеку Pubnub

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.js"></script>

Следующие шаги - опубликовать данные о широте и долготе, которые мы получили от getCurrentPosition. Чтобы опубликовать какие-либо данные, нам нужно создать один канал и объект PubNub с ключами, как показано.

window.latitude = '';
window.longitude = '';
var myChannel = "my-channel";
var pubnub = new PubNub({
    publishKey:   'pub-c-************************************',
    subscribeKey: 'sub-c-************************************'
});
setInterval(function() {
    pubnub.publish({channel:myChannel, message:reloadLocation()});
}, 10000);
function reloadLocation(){
    getLocation();
    return {latitude:window.latitude, longitude:window.longitude};
}

Шаг 3. Считайте местонахождение водителя с помощью PubNub (на странице отслеживания клиентов)

window.latitude = '';
window.longitude = '';
var myChannel = 'my-channel';
var pubnub = new PubNub({
    publishKey : 'pub-c-************************************',
    subscribeKey : 'sub-c-************************************'
});
pubnub.subscribe({
    channels: [myChannel]
})
pubnub.addListener({message:reloadLocation});
function reloadLocation(response){
    window.latitude = response.message.latitude;
    window.longitude = response.message.longitude;
    refreshMap();
}
function refreshMap(){
    var myLocation = {lat: window.latitude, lng: window.longitude};
    if(map == ''){
        map = new google.maps.Map(document.getElementById('map'), {
            center: myLocation,
            zoom: 16
        });
        marker = new google.maps.Marker({
            position: myLocation,
            map: map
        });
        marker.setMap(map);
    } else {
        marker.setPosition(new google.maps.LatLng(window.latitude, window.longitude));
    }
    map.setCenter(marker.getPosition());
}

Я использовал Google Map API, чтобы показать текущее местоположение на карте.

Кредит и любезность https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/

Кодовая ссылка Счастливого кодирования !!

Отслеживание в реальном времени с помощью карты Google и PubNub

Похожие вопросы