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

【问题标题】：How to update position of markers with real time gps coordinates?如何使用实时 gps 坐标更新标记的位置？
【发布时间】：2016-07-04 21:03:48
【问题描述】：

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

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

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

函数 startData() {

DataInterval = window.setInterval(getNewData, intervalV);


};

函数 getNewData() {
    $.getJSON（服务器，{
        乐趣：“GetGpsData”，
        userId : "用户",
        sessionId : $("#sessionId").val()
    }，填充图）；
}

函数填充映射（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();


        }

    }

}

};

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

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

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

【讨论】：

【解决方案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');
    }
}

【讨论】：