如何用实时GPS坐标更新标记的位置？

我有几辆车的实时GPS位置，我想创建一个更新标记的地图。我的代码可以工作，但它不会“更新”标记，而是将新坐标添加到传单地图中。几分钟后我的地图充满了标记。我做错了什么？这是我的基本概念。如何用实时GPS坐标更新标记的位置？

var intervalV = document.getElementById("intervalValue").value * 1000; 

document.getElementById("setIntervalButton").onclick = startData; 

function startData() { 

DataInterval = window.setInterval(getNewData, intervalV); 
 

}; 

功能getNewData（）{$ 
.getJSON（服务器，{
乐趣： “GetGpsData”，
用户名： “用户”，
的sessionId：$（ “＃的sessionId”）VAL（）
}，fillMap） ; 
} 

功能fillMap（JSON）{ 

for (var i = 0; i < json.devicesData.length; i++) { 
    var positions = json.devicesData[i].positions.length; 


     var devicepostiion; 

     if (json.devicesData[i].connected == false 
     ) { 

      var devicepostion = L.marker([json.devicesData[i].positions[positions - 1].lat, json.devicesData[i].positions[positions - 1].lon], { 
        icon : offlineCarIcon 
       }, { 
        draggable : false 
       }).addTo(map); 

     } else { 


      devicepostion = new L.marker(, { 
        icon : onlineCarIcon 
       }); 


      devicepostion.addTo(map).setLatLng([json.devicesData[i].positions[positions - 1].lat, json.devicesData[i].positions[positions - 1].lon]).update(); 


     } 

    } 

}

};

来源

2016-07-04 pawaelus

如果您的目标是更新具有新视觉外观和位置的标记（如果它们已存在于地图上），那么您应该在现有标记上使用.setIcon和.setLatLng而不是制作新标记。

您的当前代码在两种情况下都会生成新标记。

来源

2016-07-05 13:53:48 snkashis

在这里您的代码更新为您想要的。作为@snkashis指出的那样，你并不需要创建一个新的标记，每次

var devicePosition = -1; 

function fillMap(json) { 
    for (var i = 0; i < json.devicesData.length; i++) { 
    var data = json.devicesData[i]; 
     if (data.positions) { 
     var index = data.positions.length - 1; 

     if (data.positions[index].lat && data.positions[index].lon) { 
      var latLng = L.latLng(parseFloat(data.positions[index].lat), parseFloat(data.positions[index].lon)); 

      if (devicePosition === -1) { 
      var devicePosition = L.marker(latLng, {draggable : false}) 
       .addTo(map); 
      } else { 
      devicePosition.setLatLng(latLng) 
       .update(); 
      } 
      // Optional if you want to center the map on th marker 
      // map.panTo(latLng); 
     } 
    } 

    if (data.connected && devicePosition !== -1) { 
     devicePosition.setIcon(data.connected ? 'onlineCarIcon' : 'offlineCarIcon'); 
    } 
}

如果您有多个标记，则需要相应地更新自己的ID每一个，我建议找到（或添加，如果您创建API）json.devicesData[i]中的唯一ID。

让我们假设每个标记的UNIQUEID叫，好了，UNIQUEID，那么你的代码可以是这样的：

var devicePosition = {}; 

function fillMap(json) { 
    for (var i = 0; i < json.devicesData.length; i++) { 
    var data = json.devicesData[i]; 
    var uniqueId = data.uniqueId; 
     if (data.positions) { 
     var index = data.positions.length - 1; 

     if (data.positions[index].lat && data.positions[index].lon) { 
      var latLng = L.latLng(parseFloat(data.positions[index].lat), parseFloat(data.positions[index].lon)); 

      if (!devicePosition[uniqueId]) { 
      var devicePosition[uniqueId] = L.marker(latLng, {draggable : false}) 
       .addTo(map); 
      } else { 
      devicePosition[uniqueId].setLatLng(latLng) 
       .update(); 
      } 
      // Optional if you want to center the map on th marker 
      // map.panTo(latLng); 
     } 
    } 

    if (data.connected && devicePosition[uniqueId]) { 
     devicePosition[uniqueId].setIcon(data.connected ? 'onlineCarIcon' : 'offlineCarIcon'); 
    } 
}

来源

2016-07-05 14:01:10 rpadovani

如何用实时GPS坐标更新标记的位置？

回答

相关问题