Wie aktualisiere ich die Position von Markern mit Echtzeit-GPS-Koordinaten?

Question

Ich habe Echtzeit-GPS-Positionen für ein paar Autos und ich möchte eine Karte mit Update-Markierungen erstellen. Mein Code funktioniert, aber er "aktualisiert" die Markierungen nicht, sondern fügt neue Objekte mit neuen Koordinaten zur Flugblattkarte hinzu. Nach ein paar Minuten ist meine Karte voller Marker. Was mache ich falsch? Hier ist mein Grundkonzept.

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

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

function startData() {
 

DataInterval = window.setInterval(getNewData, intervalV); 
 

};
 

Funktion getNewData() {$ 
.getJSON (Server, {
Spaß: "GetGpsData", 
userId: "user", 
sessionId:. $ ("# SessionId") val() 
}, fillMap) ; 
}
 

Funktion 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(); 


     } 

    } 

} 

};

Answer 1

Wenn Ihr Ziel zu aktualisieren Marker mit einem neuen visuellen Erscheinungsbild und der Lage ist, wenn sie bereits auf der Karte vorhanden ist ... dann sollen Sie .setIcon und .setLatLng auf dem bestehenden Marker sein, anstatt einen neuen zu machen.

Ihr aktueller Code erstellt in beiden Fällen neue Markierungen.

Answer 2

Hier wurde Ihr Code aktualisiert, um zu arbeiten, wie Sie möchten. Wie @snkashis wies darauf hin, brauchen Sie nicht eine neue Markierung jedes Mal

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'); 
    } 
} 

erstellen Wenn Sie mehrere Marker haben, müssen Sie entsprechend ihrer ID jedes aktualisieren, schlage ich vor (oder fügen Sie zu finden, wenn Sie erstellen die APIs) eine eindeutige ID in json.devicesData[i].

Lassen Sie uns die UniqueId jeder Markierung annehmen heißt, na ja, UniqueId, dann Ihren Code so etwas wie das sein kann:

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'); 
    } 
}