javascript - 带有超时功能的 Google 标记掉落动画

Question

我正在尝试为大量 Google 标记创建 DROP 动画。 我不希望 300 个(左右)标记同时掉落，因此我进行了一些搜索并找到了“setTimeout”功能。

我一直按照这个问题的说明进行操作:

Animation of google markers on map load with timeout

我遵循与上面帖子中相同的步骤，但似乎无法让代码在我的示例中工作。

这是我认为可行的...

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'), {
  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,
  });


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

JavaScript 可能非常无情，很难排除故障，因为如果你犯了一个错误， map 就无法全部显示，我真的很不知所措。

知道我做错了什么吗？

#firstpost:)

Answer 1

此答案基于标记连续掉落并具有“降雨”效果。

基于您更新的comment ，我更新了最后的JSFiddle以反射(reflect)您问题的清晰度。

我基本上交换了 for 循环和 setTimeout 行，并使用 iterator 作为全局变量。

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 

很抱歉造成任何混淆，这一切都记录在 Google Marker Animation Demo 下.