Question

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

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

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

function startData() {

DataInterval = window.setInterval(getNewData, intervalV);


};

function getNewData() {
    $.getJSON(server, {
        fun : "GetGpsData",
        userId : "user",
        sessionId : $("#sessionId").val()
    }, fillMap);
}

function 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

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

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

Answer 2

此处您的代码已更新，可以根据需要使用。正如@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更新每个标记，我建议在json.devicesData[i]中找到（或添加，如果您创建API）唯一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');
    }
}

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

2 个答案: