Использование ServerSent Events для обновления в реальном времени на карте - PullRequest
Новая
       44

Использование ServerSent Events для обновления в реальном времени на карте

1 голос
/ 27 апреля 2020

Я сделал сверхлегкий GPS-трекер для мобильных устройств, сохраняя LAT и LONG в базе данных MySQL, и эта часть работает нормально.

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

<span id="result"></span>

<script>

 if(typeof(EventSource) !== "undefined") {
 var source = new EventSource("sync.php?id=<?php echo $id; ?>");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
 } else {
  document.getElementById("result").innerHTML = "No support";
}

var mymap = L.map('mapid').setView([lat, long], 13);
var marker = L.marker([lat, long]).addTo(mymap);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MyTOKEN'
}).addTo(mymap);
 </script>

Координаты поступают из файла syn c. php (и получают новые данные из базы MySQL). Моя проблема заключается в том, что данные выводят их в, но мне это нужно внутри javascript внутри маркера var myMap и var.

Данные из файла syn c выглядят так: long, lat, 13 (long и lat как фактические координаты).

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

Спасибо!

1 Ответ

0 голосов
/ 27 апреля 2020

Ваш обработчик событий находится там, где вам нужно обработать входящие данные и обновить карту: 

source.onmessage = function(event) {
  document.getElementById("result").innerHTML = event.data;
}

Показывает ли <span id="result"> широту / долготу, отправляемую сервером? Если это так, вам нужно проанализировать event.data для извлечения лат / долг (может быть event.data.lat, event.data.long?)

Этот код, похоже, ничего не делает, так как lat и long не определены в этом контексте: 

var marker = L.marker([lat, long]).addTo(mymap);

Возможно, это код, который вы должны добавить к указанной выше функции, за исключением того, что было изменено использование event.data.lat и event.data.long вместо lat и long

...