如何使用 JSON 数据同时更新多个标记位置？传单 JS

Question

我正在使用Leaflet JS 构建一个交互式地图查看器，可以跟踪多个设备的移动。我正在使用 JSON 数据为每个标记设置纬度和经度。

JSON 数据如下所示：

{"BMS":[{"id":"PR01","type":"prajurit","lat":"-6.248008","long":"107.004158"},{"id":"PR02","type":"prajurit","lat":"-6.224084","long":"106.653069"},{"id":"PR03","type":"kendaraan","lat":"-6.244316","long":"106.649734"}]}

数据包含来自 3 个设备的位置信息。

我已经使用for 循环成功地根据设备的纬度和经度设置了标记。但我无法用setLatLng 和for 循环更新标记的移动。我不想每次获得位置更新时都使用清除图层功能添加新标记，因为我需要保存每个设备的移动历史以供以后使用。我应该怎么做才能让它工作？任何建议将不胜感激。

这是我的代码。 setInterval 旨在连续运行代码。我尝试使用数组变量作为标记变量，并标记每个标记（因为使用 windows[variable_name] 是不好的做法）。

window.setInterval(function(){

    ++z;
    //alert(z);

    function doSomething(data){
        jsonBmsData = JSON.parse(data);

    }

    $.get('get_jsondata.php', doSomething);

    if(z == 1){

        for(var i=0; i<jsonBmsData.BMS.length; ++i){

            marker[i][0] = jsonBmsData.BMS[i].id;
            marker[i][1] = jsonBmsData.BMS[i].type;
            marker[i][2] = jsonBmsData.BMS[i].lat;
            marker[i][3] = jsonBmsData.BMS[i].long;

            markerMove[i] = L.marker([marker[i][2],marker[i][3]])
            .bindPopup('ID Prajurit = ' + marker[i][0] + '<br>Tipe = ' + marker[i][1]
            + '<br>Lat = ' + [marker[i][2] + '<br>Long = ' + marker[i][3])
            .addTo(map);

        }

    } else if(z > 1){

        for(var j=0; j<jsonBmsData.BMS.length; ++j){

            marker[j][0] = jsonBmsData.BMS[j].id;
            marker[j][1] = jsonBmsData.BMS[j].type;
            marker[j][2] = jsonBmsData.BMS[j].lat;
            marker[j][3] = jsonBmsData.BMS[j].long;

            var newLatLng = new L.latLng(marker[j][2],marker[j][3]);

            markerMove[j].setLatLng(newLatLng).update();
            markerMove[j]._popup.setContent('ID Prajurit = ' + marker[j][0] + '<br>Tipe = ' + marker[j][1]
            + '<br>Lat = ' + [marker[j][2] + '<br>Long = ' + marker[j][3]);

        }

    }

},50);

Answer 1

我在调用setLatLng 方法时没有看到任何错误，但我想，有一个错误

var newLatLng = new L.latLng(marker[j][2],marker[j][3]); 

当你想创建新的长纬度对象时，你应该调用new L.LatLng()（带有大 L 字母）或只是L.latLng()，这是一个快捷方法，它最后调用new L.LatLong()。检查您的属性 newLatLng 是否是正确的对象。

Answer 2

您可以使用一个对象来存储标记，其 id 作为属性名，标记作为属性值。这将使事情变得容易得多。要存储以前的位置，您可以向每个标记添加一个数组来存储它们。这里用cmets的代码来解释一下：

// The object to store markers
var markers = {};

// Function for setting/updating markers
function setMarkers(data) {

  // Loop over the BMS array and handle each object
  data.BMS.forEach(function (obj) {

    // Check if there is already a marker with that id in the markers object
    if (!markers.hasOwnProperty(obj.id)) {
      // No marker with that id found in the markers object

      // Create it, and add it to the map, store into markers object
      markers[obj.id] = new L.Marker([obj.lat, obj.long]).addTo(map);

      // Add array to the marker instance to store the previous latlngs
      markers[obj.id].previousLatLngs = [];

    } else {
      // There is already a marker with that id in the markers object

      // Store the previous latlng
      markers[obj.id].previousLatLngs.push(markers[obj.id].getLatLng());

      // Set new latlng on marker
      markers[obj.id].setLatLng([obj.lat, obj.long]);
    }
  });
}

这是一个关于 Plunker 的工作示例； http://plnkr.co/edit/HrrnXh?p=preview

Leaflet 有一个很酷的插件，叫做 Realtime。它完全符合您的要求，但它需要一个 GeoJSON 集合作为数据，因此它不适用于您的数据集。如果您能够将数据转换为 GeoJSON 集合，那么值得一看：

GeoJSON：http://geojson.org/

演示：http://www.liedman.net/leaflet-realtime/

回购：https://github.com/perliedman/leaflet-realtime