MeteroJSアプリでGoogleマップマーカーのプロットを遅らせることはできません

Question

アプローチ@https://duncan99.wordpress.com/2015/01/22/animated-paths-with-google-maps/に続いて、MeteorJSのルートに沿ってマーカーのアニメーションを複製しようとしています。流星では、私が抱えている問題は、モンゴーのコレクションにある座標が反応的であるということです。このため、setInterval、setTimeoutの使用、またはChronosなどのパッケージの使用は機能しません。私のアプローチは、ルートを描くのは簡単です（それはうまくいきます）。そして最初の座標にマーカーを置き、遅らせて、それを取り除き、次の座標に新しいマーカーを置きます。問題は、なぜ遅延アプローチが機能していないのか理解できず、マーカの動きが非常に速く表示されるだけです。以下のコード。 CodeParser関数の動作を信頼し、varsを前もって宣言します。 TIA。

var apiKey = "------------"; 
var latValue = "------------"; 
var lngValue = "------------"; 
var MAP_ZOOM = "--"; 
var oldLatLng = ""; 
var oldUTC = 0; 
var i = 0; 

if (Meteor.isClient) { 

Template.map.helpers({ 
mapOptions: function() { 
    if (GoogleMaps.loaded()) { 
    return { 
     center: new google.maps.LatLng(latValue, lngValue), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: MAP_ZOOM //USA view...but will zoom based on sync location 
    }; 
    } 
} 
}); 

Template.map.onCreated(function() 
    { 

    //load API 
    GoogleMaps.load({ key:apiKey, libraries: 'geometry,places,visualization' }); 
    console.log("GoogleAPI loaded with key: " + apiKey); 

    //Prep API and insert initial dataset 
    GoogleMaps.ready('map', function(map) { 

    //check for and get NMEA coords from collection 
    dataset = Coords.find({}, {sort: { order_id: 1}}); 

    //iterate through dataset and animate marker movement 
    dataset.forEach(function (stat) { 

     Tracker.autorun(function() 
     { 
     Chronos.liveUpdate(2000); //1 sec dlay between each marker movement 

     //convert coords 
     myLatLng = CoordParser(stat.lat, stat.lat_dir, stat.lon, stat.lon_dir); 

     //place marker on path using coords 
     if (oldLatLng != "" && myLatLng != oldLatLng && stat.utc_timestamp >= oldUTC) { //conditions for error checking 

      if (i==0) {   //mark start with a marker if it is the first point 

      marker = new google.maps.Marker({ 
       position: myLatLng, 
       icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", 
       map: map.instance, 
       title: "start" 
       }); 

       i++; //increase counter for logging test only 

      } else { //animate marker 

      //remove last marker with timing delay to give appearance of movement 
      marker.setMap(null); 

      //draw next marker 
      marker = new google.maps.Marker({ 
       position: myLatLng, 
       icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", 
       map: map.instance, 
       title: stat._id 
      }); 

      } 
     } //end draw route 

     //set old point for destination point next loop 
     oldLatLng = myLatLng; 
     oldUTC = stat.utc_timestamp; 

     }); //end chronos delay 

     }); //end for each point to move marker 

    }); //end googlemap ready  

    }); //end on created 

}; 

Answer 1

タイムアウト/クロノスのものはすべて同時に実行されているようです。タイムアウト時間にデータセット項目のインデックスを掛けた場合、タイムアウト時間は連続して発生する必要があります。

以下のコードサンプルはMeteor.setTimeoutと同じですが、同じ原理がクロノスに当てはまるはずです。

//iterate through dataset and animate marker movement 
    dataset.forEach(function (stat,index) { 
     Meteor.setTimeout(function(){ 
      //Use the console to see if we are stepping through the points 
      console.log(stat); 

      //YOUR MARKER MOVING CODE HERE 

     },2000 * index);//HERE WE MULTIPLY THE TIMEOUT WITH THE INDEX 
    }); 

ブラウザのコンソールを見ると、同時に座標オブジェクトが1つずつ表示されるはずです。

あなたのforeachループは、タイムアウトが完了するのを待たずに、すべての項目を非常に素早く（1秒以内に）ループします。だから、アイデアはあなたが設定した時間と以前の動きの時間を足して、それぞれの動きを遅らせることです。