JavaScript與單張 - javascript代碼不工作沒有提醒

Question

我正在JavaScript和傳單地圖上創建類似這樣的東西：我有一個地圖在屏幕上，並在地圖上應該是多個多邊形的箭頭形狀按照地圖上的數據正在變化。問題是javascript在JavaScript中添加警報時工作正常，但如果不是，那麼箭頭只顯示在最後一個位置的屏幕上，在這種情況下沒有任何動作。我試圖把代碼放入window.onload中，但它仍然不起作用。它只有當我有警報時纔有效。

數據輸入來自json文件。 另外我沒有這個問題，然後我開始使用傳單multipolygon而不是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」訪問點看起來有點像它實際上是一個數組，然後我會對待它是一個數組（請參閱for (var viewEntryKey in data.points) ）。只是一個可能是錯誤的想法...

Answer 2

問題是運行兩個for循環。循環「for（var j = 0; j < arrowLength; j ++）」實際上並不需要，並且是造成問題的原因之一。