Question

我试图按照方法@ https://duncan99.wordpress.com/2015/01/22/animated-paths-with-google-maps/复制MeteorJS中路线后面的标记动画。在Meteor中，我遇到的麻烦是Mongo集合中的坐标被认为是被动的。因此，我使用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，但我猜想同样的原则应该适用于chronos。

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

当您在浏览器的控制台中查看时，您应该看到坐标对象逐个而不是同时出现。

你的foreach循环不会等待超时结束，它只是非常快速地循环遍历所有项目（在一秒钟内）。因此，我们的想法是在您设置的时间加上前一次移动的时间后延迟每次移动。

无法在MeteroJS应用中延迟绘制Google地图标记

1 个答案: