使用for循环在地图上设置动画标记

时间:2016-01-12 12:34:37

标签: javascript closures leaflet markers

我试图使用for循环在地图上设置几个标记的动画,但不是按照预期设置动画,下面的代码是同时添加连续坐标(full code here):

for (j in jsonObj[i]) {
 for (k in jsonObj[i][j]) {
  if (jsonObj.hasOwnProperty(i)) {

     subindex = Object.keys(jsonObj[i][j][k]);
     sublenght = subindex.length;

   for (cnt = 0; cnt < sublenght; cnt += 1) {

     lat = [],
     lon = [],

     lat[cnt] = (jsonObj.flightPositions[j].positions[cnt].lat)
     lon[cnt] = (jsonObj.flightPositions[j].positions[cnt].lon)

   var marker = new L.Marker.movingMarker([[lat[cnt], lon[cnt]]], [2500], {autostart: true}).addTo(map);

   };
  }
 }
}

我尝试使用闭包,总是得到相同的结果。我可以看到我最近的尝试here。我猜它有问题,但我最担心的是我的整个方法可能都是错的。我希望有人能给我一个暗示。任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:1)

根据Leaflet.MovingMarker plugin usage,你应该只创建一个标记(每个移动标记你需要),并直接传递位置数组

L.movingMarker(<LatLng[]> latlngs, <Number[]> durations [,<Object> options]);

在您的代码中,每个位置创建一个标记,仅显示当前位置。

我不会在你的JSFiddle上构建,因为它看起来要比可能必要的复杂得多(不知道你为什么要尝试一些IIFE),所以在你发布的代码的基础上,你会有类似的东西: / p>

for (j in jsonObj[i]) { // i === "flightPositions"
  for (k in jsonObj[i][j]) { // j === array index, k === "positions"
    if (jsonObj.hasOwnProperty(i)) { // should have been checked before

      subindex = Object.keys(jsonObj[i][j][k]); // indices of array
      sublenght = subindex.length; // could have just done jsonObj[i][j][k].length
      var coordinates = [];

      for (cnt = 0; cnt < sublenght; cnt += 1) { // iterates in positions array
        coordinates.push([
          jsonObj.flightPositions[j].positions[cnt].lat,
          jsonObj.flightPositions[j].positions[cnt].lon
        ]);
      };

      // outside the positions array for loop.
      var marker = L.Marker.movingMarker(coordinates, 2500, {
        autostart: true
      }).addTo(map);
    }
  }
}