带有传单的 Javascript - javascript 代码在没有警报的情况下无法工作

Question

我正在使用 javascript 和传单地图来创建类似这样的东西：我在屏幕上有一张地图，地图上应该有多个箭头形状的多边形，可以根据地图上不断变化的数据进行旋转。问题是当我在 javascript 中添加警报时 javascript 工作正常，但如果没有，那么箭头只会显示在最后一个位置的屏幕上，在这种情况下没有动作。我试图将代码放在 window.onload 中，但它仍然不起作用。它仅在我有警报时才有效。

数据输入来自一个 json 文件。 此外，在我开始使用传单多多边形而不是 geojson 多边形之前，我没有这个问题。

下面是我的代码。我可以提供任何其他需要的细节。 感谢您的帮助！

window.onload = function () {

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/4fd891040a8a4ecb805c388019e23d46/64082/256/{z}/{x}/{y}.png';

var basemap = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
var latlng = new L.LatLng(30, -88);
var delay = 350;        // animation delay (larger is slower)
var Npoints;        // number of points per track
var isRunning = true;
var multiPolygon = [];
var pts =[];
var arrowSize = [];
var arrowAngle = [];
var arrowsDataMap = new Map();
var pointLength;
var arrowLength;

function showTimeStep(p) {
    var point = [];
    var latLngPoints = [];

    //for loop to create one layer of multipolygons
    for (var j = 0; j < arrowLength; j++) {
        alert(arrowLength);
        for (var m = 0; m < pointLength; m++) {     
            if(j>0)
                map.removeLayer(multiP);

            parts.push(0.00);
            //some code to create polygon
            parts.push(0.00+size/3);

            var combined = parts.join(" ");
            var a = combined.split(":");
            var ans = [];
            for(var k=0;k<a.length;k++){
                var latLong = a[k].split(",");
                ans.push([ parseFloat(latLong[0]), parseFloat(latLong[1]) ]);
            }

            domain = {"type": "Polygon", "coordinates": [ans]}; 

            var sine = Math.sin(-angle);
            var cos = Math.cos(-angle);

            for (var i=0;i<ans.length;i++){
                var px=ans[i][0];
                var py=ans[i][1];

                //rotate
                var xnew = (px*cos)-(py*sine);
                var ynew = (px*sine)+(py*cos);

                //translate
                px=((xnew+latLngPoint[0]));
                py=((ynew+latLngPoint[1]));
                ans[i][0]=px;
                ans[i][1]=py;

                //polygon
                point[i] = L.latLng(py,px);
            }
            //Array of multipolygons
            multiPolygon[m] = point;
        }

        var multiP = L.multiPolygon(multiPolygon);
        map.addLayer(multiP); //Plotting polygon on the map

        if (p == arrowLength) {
            nextp = (p + 1) % Npoints;
            setTimeout(function(i) {
                return function() {
                    showTimeStep(i);
                }
            }(nextp), delay);
        }
    }
}

//function to load data from json file and create map
function animateLines(data) {
    pointLength = data.points.length;
    arrowLength = data.points["0"].point.length;

    for (var viewEntryKey in data.points) {
        var arrowsMap = new Map();
        for (var i = 0; i < data.points[viewEntryKey].point.length; i++) {
            var arrowMap = new Map();

            arrowMap.set(1,data.points[viewEntryKey].point[i].latLng);
            arrowMap.set(2,data.points[viewEntryKey].point[i].size);
            arrowMap.set(3,data.points[viewEntryKey].point[i].angle);

            arrowsMap.set(i,arrowMap);
        }

        arrowsDataMap.set(viewEntryKey,arrowsMap);
    }

    showTimeStep(0);
}

var tracks = L.layerGroup([])
var map = new L.Map('map', {center: latlng, zoom: 7, layers: [basemap, tracks]});
map.addControl(new MyButton({layer: tracks}));

var tracklines = null;

//json file holding data
var url1 = "pointsData.json";
$.getJSON(url1, function(mydata) {
    tracklines = mydata;
    //$.each(mydata.points.point,function(index,value){ alert(value.size);})
})
.fail(function(xhr, statustext) { 
    tracklines = JSON.parse(xhr.responseText.replace(/NaN/g,'null'));
})
.done(function() {
    // assume all lines have the same number of points
    Npoints = 301;
    animateLines(tracklines);
});
};

Json（由于数据被复制并且可以更好地结构化，它有点粗糙）：

     {
  "points": [
  {
    "point": [
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.79"
      },
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.69"
      }
      ,
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.49"
      }
    ]
  },
  {
    "point": [
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.79"
      },
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.69"
      }
      ,
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.49"
      }
    ]
  }
  ]
}

Answer 1

我不知道问题的确切原因是什么。但是……

• 始终使用console.log 而不是alert()

alert 正在彻底改变你的代码的时间，而console.log 应该或多或少是中立的。

首先，您必须确定计时/异步问题是由 JSON 加载还是由您的 setTimeout 调用引起的。您可以删除alert 并放置一些控制台日志消息，运行程序并分析输出。玩弄delay，例如将其设置为 3 秒或 3 毫秒，看看行为如何变化。

顺便说一句，您似乎对 JavaScript 没有经验，例如您在循环中创建函数并没有犯错误，而是用匿名函数包装了它 - 干得好！由于我不知道您的 JSON 数据的结构，也许我错了，但是使用“0”之类的字符串访问点看起来有点像它实际上是一个数组，然后我会认为它是一个数组（参见 @ 987654328@)。只是一个可能是错误的想法......

Answer 2

问题在于运行两个 for 循环。循环“for (var j = 0; j