在收听套接字 io 时更新传单上的标记位置答案

【问题标题】：update marker location on leaflet while listening to socket io在收听套接字 io 时更新传单上的标记位置
【发布时间】：2018-12-02 21:50:03
【问题描述】：

使用 node.js 和 socket.io 在传单地图标记中检索用户位置，socket.io 服务器每 10 秒发出每个连接用户的坐标，如下所示：

{ username: 'abc',
  lat: 50.5144613,
  lng: 50.2842622,
}

在我使用的客户端：

socket.on('new Location', function(data){
         var markers=[];
            var result=JSON.stringify(data);
            var obj = JSON.parse(result);

         if (!markers[obj.username] ) {
            markers[obj.username] = L.marker([obj.lat, obj.lng]).bindPopup(obj.username).addTo(map);
            } else {
            markers[obj.username].setLatLng(obj.lat, obj.lng).setPopupContent(objz.username);
            }

当客户端侦听服务器时，这会为每个连接的用户绘制大量标记，而我需要更新每个连接用户的标记位置。如何更新标记位置而不绘制更多标记？

【问题讨论】：

如果我的回答有帮助，请随时接受和/或投票。
@peeebeee 我试过了，当尝试更新标记时出现错误：未捕获的 TypeError：无法读取 null 的属性 'lat'

标签： node.js socket.io leaflet

【解决方案1】：

markers[] 数组的范围有误 - 每次收到位置更新时，您都会创建一个新数组。

将var markers=[] 移出socket.on 函数。

例如（取决于其余代码的布局方式）

var markers=[];

socket.on('new Location', function(data){

            var result=JSON.stringify(data);
            var obj = JSON.parse(result);

         if (!markers[obj.username] ) {
            markers[obj.username] = L.marker([obj.lat, obj.lng]).bindPopup(obj.username).addTo(map);
            } else {
            markers[obj.username].setLatLng(obj.lat, obj.lng).setPopupContent(obj.username).update();
            }
});

我还添加了.update()，因此您修改后的标记会在地图上自行更新。

【讨论】：

【解决方案2】：

非常适合我。将我的代码放在这里，供任何想将其与嵌套数组一起使用的人使用。

//create markers array
var markers=[];
    
//Websocket responses to markers
function onMessage(evt) {
        
var obj = JSON.parse(event.data);
for (var k = 0; k < obj.positions.length; k++) {
            
if (!markers[obj.positions[k].deviceId]) {
markers[obj.positions[k].deviceId] = L.marker([obj.positions[k].latitude, obj.positions[k].longitude]).bindPopup("Device ID: " + obj.positions[k].deviceId).addTo(map);
} else {
markers[obj.positions[k].deviceId].setLatLng(obj.positions[k].latitude, obj.positions[k].longitude).setPopupContent("Device ID: " + obj.positions[k].deviceId).update();
}
}

需要根据您的数组值更改引用（即obj.positions[k].latitude）。 p>

【讨论】：