Das Verlegen von Google Map Markern in der MeteroJS App kann nicht verzögert werden

Question

Ich versuche, die Animation eines Markers nach einer Route in MeteorJS nach dem Ansatz @https://duncan99.wordpress.com/2015/01/22/animated-paths-with-google-maps/ zu replizieren. In Meteor sind die Probleme, die ich habe, die Koordinaten, die in einer Mongo-Sammlung liegen, werden als reaktiv serviert. Aus diesem Grund funktionieren meine Verwendung von SetInterval, SetTimeout oder das Verwenden von Paketen wie Chronos nicht. Meine Herangehensweise ist einfach, die Route zu zeichnen (was gut funktioniert), dann eine Markierung an der ersten Koordinate zu platzieren, zu verzögern, zu entfernen und eine neue Markierung an der nächsten Koordinate anzubringen, zu wiederholen ..., so dass es wie eine Bewegung aussieht. Problem ist, dass ich nicht herausfinden kann, warum der Delay-Ansatz nicht funktioniert und Markerbewegung so schnell macht, dass sie nur auftaucht. Code unten. Vertraue der CodeParser-Funktion und vars werden im Voraus deklariert. 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

Es scheint, dass Ihre Timeouts/Chronos-Dings alle zur gleichen Zeit laufen. Wenn Sie die Timeout-Zeit mit dem Index des Datensatzelements multiplizieren, sollten sie der Reihe nach ausgelöst werden.

Codebeispiel unten ist mit Meteor.setTimeout aber das gleiche Prinzip sollte gelten für Chronos ich denke.

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

Wenn Sie in der Konsole Ihres Browsers aussehen sollten Sie sehen, die von einer nach dem anderen kommen Objekte koordinieren, nicht zur gleichen Zeit.

Ihre foreach-Schleife wartet nicht auf das Ende des Timeouts, sondern durchläuft alle Elemente sehr schnell (innerhalb einer Sekunde). Die Idee besteht also darin, jede Bewegung um die eingestellte Zeit plus die Zeit der vorherigen Züge zu verzögern.