谷歌标记在地图加载时的超时动画 [英] Animation of google markers on map load with timeout
问题描述
我想为每个谷歌标记的DROP动画创建一个超时，但我认为标记和数组项目的闭包代码是冲突的。我不知道太多关于闭包的问题，并且在问题上陷入困境。
我可以立即让它们全部下降。
<但我希望在每个100毫秒的标记之后有一个超时。
这就是我认为会有效的工作
...
//循环nc数组
for（var i = 0; i
//在标记上创建100 ms规则创建
setTimeout（function（）{
//创建标记
var marker = new google.maps.Marker（{
position：nc [i]，
map：map，
title：tron+ i，
animation：google.maps.Animation.DROP，
}）;
}，我* 100）;
//创建闭包
（function（i，marker）{
//添加infowindow
google.maps.event.addListener（marker ，'click'，function（）{
if（！infowindow）{
infowindow = new google.maps.InfoWindow（）;
}
//设置信息窗口的内容
infowindow.setContent（'< h2> Tron lives |'+ i +'< / h2>'）;
infowindow.open（map，marker）;
}）;
}）（i，marker）;
};
...
但这不起作用。我认为，一旦在循环中创建了标记，就会在该创建过程中设置超时，从而创建降雨雨滴效果。
解决方案>与@Bryan Weaver一样的想法。花了你的小提琴并修改了一下，以在函数中创建标记，并迭代设置超时。
var addmarker = function（i）{
//创建标记
var marker = new google.maps.Marker（{
position：nc [i]，
map：map，
title：tron+我，
动画：google.maps.Animation.DROP，
}）;
//创建闭包
（function（i，marker）{
//添加infowindow
google.maps.event.addListener（marker ，'click'，function（）{
if（！infowindow）{
infowindow = new google.maps.InfoWindow（）;
}
//设置信息窗口的内容
infowindow.setContent（'< h2> Tron lives |'+ i +'< / h2>'）;
infowindow.open（map，marker）;
}）;
}）（i，marker）;
if（i ++< nc.length）{
setTimeout（function（）{addmarker（i）}，100）;
}
}
addmarker（0）;
下面是完整的小提琴： http://jsfiddle.net/LzJ8B/
I would like to create a timeout on each google marker's DROP animation, but I think the closure code for the marker and the array item are conflicting. I do not know too much about closures and am getting a bit stuck on the problem.
I can get them all falling at once.
but I would like to have a timeout after every marker of 100 ms.
This is what I thought would work
...
//Loop through nc array
for (var i = 0; i < nc.length; i++) {
//Create 100 ms rule on marker creation
setTimeout(function () {
//Create marker
var marker = new google.maps.Marker({
position: nc[i],
map: map,
title: "tron" + i,
animation: google.maps.Animation.DROP,
});
}, i * 100);
//Creating the closure
(function (i, marker) {
//Add infowindow
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
//Setting content of info window
infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');
infowindow.open(map, marker);
});
})(i, marker);
};
...
But that does not work. I figure that once the markers are created in the loop one would set the timeout on that creation process which would create the falling rain marker effect.
Had the same thought as @Bryan Weaver. Took your fiddle and modified it a bit to create the markers in a function, and iteratively set the timeout. Ended up with what follows, and it successfully does your "rain" effect.
var addmarker = function(i) {
//Create marker
var marker = new google.maps.Marker({
position: nc[i],
map: map,
title: "tron" + i,
animation: google.maps.Animation.DROP,
});
//Creating the closure
(function (i, marker) {
//Add infowindow
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
//Setting content of info window
infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');
infowindow.open(map, marker);
});
})(i, marker);
if(i++ < nc.length) {
setTimeout(function() {addmarker(i)}, 100);
}
}
addmarker(0);
Here's the full fiddle: http://jsfiddle.net/LzJ8B/
这篇关于谷歌标记在地图加载时的超时动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
