Google maps Can';t在MeteroJS应用程序中延迟绘制谷歌地图标记

Google maps Can';t在MeteroJS应用程序中延迟绘制谷歌地图标记,google-maps,meteor,google-maps-api-3,google-maps-markers,Google Maps,Meteor,Google Maps Api 3,Google Maps Markers,我正在尝试复制MeteorJS中一个标记跟随路径的动画,该路径跟随进场@。在Meteor中,我遇到的问题是Mongo集合中的坐标被认为是被动的。因此,我使用setInterval、setTimeout或使用诸如Chronos之类的软件包都不起作用。我的方法很简单,绘制路线(效果很好),然后在第一个坐标处放置一个标记,延迟,移除它,然后在下一个坐标处放置一个新标记,重复…,使其看起来像是移动。问题是,我不明白为什么延迟方法不起作用,渲染标记移动得如此之快,以至于出现了。代码如下。信任CodePar

我正在尝试复制MeteorJS中一个标记跟随路径的动画,该路径跟随进场@。在Meteor中,我遇到的问题是Mongo集合中的坐标被认为是被动的。因此,我使用setInterval、setTimeout或使用诸如Chronos之类的软件包都不起作用。我的方法很简单,绘制路线(效果很好),然后在第一个坐标处放置一个标记,延迟,移除它,然后在下一个坐标处放置一个新标记,重复…,使其看起来像是移动。问题是,我不明白为什么延迟方法不起作用,渲染标记移动得如此之快,以至于出现了。代码如下。信任CodeParser函数可以工作,并且变量是预先声明的。蒂亚

var apiKey=“-------------”;
var latValue=“-------------”;
变量lngValue=“-------------”;
var MAP_ZOOM=“--”;
var oldLatLng=“”;
var oldUTC=0;
var i=0;
if(Meteor.isClient){
Template.map.helpers({
映射选项:函数(){
if(GoogleMaps.loaded()){
返回{
中心:新的google.maps.LatLng(latValue,lngValue),
mapTypeId:google.maps.mapTypeId.ROADMAP,
缩放:地图\缩放//美国视图…但将根据同步位置进行缩放
};
}
}
});
Template.map.onCreated(函数()
{
//加载API
load({key:apiKey,libraries:'geometry,places,visualization'});
log(“GoogleAPI加载了密钥:“+apiKey”);
//准备API并插入初始数据集
GoogleMaps.ready('map',函数(map){
//从集合中检查并获取NMEA坐标
dataset=Coords.find({},{sort:{order\u id:1}});
//遍历数据集并设置标记移动的动画
dataset.forEach(函数(stat){
Tracker.autorun(函数()
{
Chronos.liveUpdate(2000);//每次标记移动之间间隔1秒
//转换坐标
myLatLng=CoordParser(stat.lat,stat.lat_dir,stat.lon,stat.lon_dir);
//使用坐标在路径上放置标记
如果(oldLatLng!=“”&&myLatLng!=oldLatLng&&stat.utc\u timestamp>=oldUTC){//错误检查的条件
如果(i==0){//如果是第一个点,则用标记开始标记
marker=新的google.maps.marker({
职位:myLatLng,
图标:“http://maps.google.com/mapfiles/ms/micons/blue.png",
map:map.instance,
标题:“开始”
});
i++;//仅为日志测试增加计数器
}else{//设置标记动画
//移除最后一个带有定时延迟的标记,以显示移动的外观
marker.setMap(空);
//画下一个记号笔
marker=新的google.maps.marker({
职位:myLatLng,
图标:“http://maps.google.com/mapfiles/ms/micons/blue.png",
map:map.instance,
标题:统计号
});
}
}//结束绘制路线
//为下一个循环的目标点设置旧点
oldLatLng=myLatLng;
oldUTC=stat.utc\u时间戳;
});//结束计时延迟
});//每个要移动的点的结束标记
});//结束谷歌地图准备就绪
});//在创建时结束
};

您的超时/计时功能似乎同时运行。如果将超时时间乘以数据集项的索引,则应按顺序触发

下面的代码示例是Meteor.setTimeout,但我想同样的原则应该适用于chronos

//遍历数据集并设置标记移动动画
dataset.forEach(函数(stat,index){
Meteor.setTimeout(函数(){
//使用控制台查看我们是否正在逐步通过这些点
控制台日志(stat);
//你的标记移动代码在这里
},2000*index);//这里我们将超时与索引相乘
});
在浏览器的控制台中查看时,应该会看到坐标对象一个接一个地出现,而不是同时出现


您的foreach循环不会等待超时完成,它只是非常快速地(在一秒钟内)循环所有项目。因此,我们的想法是将每次移动的时间延迟到您设定的时间加上之前移动的时间。

似乎您的超时/计时功能都在同一时间运行。如果将超时时间乘以数据集项的索引,则应按顺序触发

下面的代码示例是Meteor.setTimeout,但我想同样的原则应该适用于chronos

//遍历数据集并设置标记移动动画
dataset.forEach(函数(stat,index){
Meteor.setTimeout(函数(){
//使用控制台查看我们是否正在逐步通过这些点
控制台日志(stat);
//你的标记移动代码在这里
},2000*index);//这里我们将超时与索引相乘
});
在浏览器的控制台中查看时,应该会看到坐标对象一个接一个地出现,而不是同时出现


您的foreach循环不会等待超时完成,它只是非常快速地(在一秒钟内)循环所有项目。因此,我们的想法是将每次移动延迟到您设定的时间加上之前移动的时间。

看起来这与foreach有关。我猜暂停都是同时开始(和结束)的。您可能应该以某种方式将其设置为顺序。更新在您提供的链接中,通过将超时乘以迭代器:200*i,步骤看起来是顺序的。我尝试使用setTimeout、setInterval和Chronos包延迟for/each循环执行,但没有成功。屏幕只是呈现整个集合“数据集”,而不考虑延迟。使用Chronos会导致整个记录集无限循环…不幸的是,我提供的链接是一个简单的JS-only示例,它不是被动的。看起来这与foreach有关。我猜暂停时间都结束了