使用ServerSent事件在地图上进行实时更新

Question

我为移动设备制作了一个超级简单的GPS跟踪器，用于将LAT和LONG保存到MySQL数据库，并且该部分工作正常。

[在第二页上，我试图基于服务器通过ServerSent Events的更新来实时更新地图上的标记。问题是我不了解如何将gps-location的输出映射到生成标记的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>

坐标来自sync.php文件（并从MySQL数据库获取新数据）。我的问题是数据正在将其输出到，但我需要在var myMap和var标记内的javascript中使用它。

同步文件中的数据如下所示：long，lat，13（long和lat为实际坐标）。

任何简单的解决方案，这样只要服务器推送新数据，地图位置就会自动更新？

谢谢！

Answer 1

您的事件处理程序是您需要处理传入数据并更新地图的位置：

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？