Question

使用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);
            }

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

Answer 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(objz.username).update();
            }
});

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

Answer 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.位置[k].纬度）。 >

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

2 个答案: