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

Question

我正在使用传单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是用来连续运行代码的。我尝试使用数组变量作为标记变量，并标记每个标记(因为使用windowsvariable_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

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

// 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]);
    }
  });
}

下面是一个关于柱塞的工作示例：http://plnkr.co/edit/HrrnXh?p=preview

有一个非常酷的传单插件，称为实时。它做的正是你想要的，而且更多，但它期望一个GeoJSON集合作为数据，所以它将不能与您的数据集一起工作。如果您能够将数据转换为GeoJSON集合，那么确实值得一看：

GeoJSON：http://geojson.org/

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

存储库：https://github.com/perliedman/leaflet-realtime

Answer 2

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

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

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