Javascript 带超时的Google Marker Drop动画

我正在尝试为大量的谷歌标记创建一个放置动画。 我不希望300个（或更多）标记同时掉落，所以我做了一些搜索，找到了“setTimeout”功能

我一直遵循这个问题的指示：

我正在遵循与上面文章相同的步骤，但在我的示例中似乎无法使代码正常工作

这是我认为有效的方法

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
  center: new google.maps.LatLng(54.059170, -4.797820),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});


var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: EuroPCmarker,
  });


  (function (i, marker) {


  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    });

  })(marker, i);
  if(i++ < nc.length) {
        setTimeout(function() {addmarker(i)}, 100);
    }

}
addmarker(0);

var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：新google.maps.LatLng（54.059170，-4.797820），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

我的代码与我提到的链接中的帖子有点不同，但我不明白为什么不管怎样它都不能工作

这是我的工作代码（一次删除所有标记）

var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：新google.maps.LatLng（54.059170，-4.797820），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

JavaScript可能是非常不可原谅的，很难排除故障，因为如果你犯了一个错误，地图就不能全部显示出来，我真的不知所措

知道我做错了什么吗

#firstpost：）

这个答案基于OP的原始问题，即在设定的时间后同时删除所有标记 我已经用修复程序更新了。就像，您只需要为将标记实例化到地图的部分添加一个设置的超时

我将关键部分封装在一个匿名函数中，并在DOM和Google Maps API准备就绪后1秒钟使用

Google.Maps.event.addDomListener（窗口，'load'，initialize）；

调用该部分。

这个答案基于标记连续下降并产生“降雨”效应。 根据你的更新，我更新了最后一个，以反映你对问题的明确性

我基本上把

换成了

循环和

setTimeout

行，并将

迭代器

用作全局变量

iterator = 0; //Setup global iterator to go through markers
for(var i = 0; i < locations.length; i++)
    setTimeout( function() {
        //i can't be passed through because, by the time setTimeout executes, i == locations.length
        addMarker(locations);
    }, i * 500); //Execute addMarker every 500ms 

iterator=0；//设置全局迭代器以遍历标记
对于（变量i=0；i

---

很抱歉出现任何混乱，这些都记录在。

你能发布设置

位置的代码吗？

？我已经为这个问题启动了一个解决方案。您好，很抱歉回复太晚。我已经用稍微编辑过的代码（删除了公司名称、徽标、销售数据等）更新了您创建的JSFIDLE你没有在小提琴里把你的HTML从Javascript和CSS中分离出来，在位置列表中有一个逗号。我仍然不能让它玩球。我已经按照Google marker动画演示的格式分离了setTimeout和marker实例。添加setTimeout是我不明白的地方（如中所述，我不知道如何操作代码以使用我已经在使用的代码）你弄乱了JSFIDLE中的大括号。他们的演示使

setTimeout

函数中的内容过于复杂。

Location

和

i

在

addMarker

函数中没有作用域，当你将该部分代码拉到

initialize

之外时。在

addListener中包装一个闭包

回调函数是不必要的。Google的演示程序执行不同的功能，即按顺序删除标记。您在OP中表示希望同时删除标记，因此我将其更改回原处。我也修复了引用，因为该代码存在一系列问题。我认为主要问题是该代码中缺少注释代码。对此我深表歉意，我希望我已经添加了足够的数量，以便您能够了解这次发生的事情。我已经更新了代码。抱歉，我的问题措辞一定很糟糕，我能够一次删除所有标记，但是，我希望标记能够一个接一个地快速删除（很像在这篇文章中：。这就是为什么我稍微改变了此处，以模拟引用：“雨效应”。很抱歉造成混淆。两个答案都会很方便，但这一个正是我想要的。非常感谢！：）感谢您在这一点上的耐心。

iterator = 0; //Setup global iterator to go through markers
for(var i = 0; i < locations.length; i++)
    setTimeout( function() {
        //i can't be passed through because, by the time setTimeout executes, i == locations.length
        addMarker(locations);
    }, i * 500); //Execute addMarker every 500ms