如何用實時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座標更新標記的位置？

回答

相關問題