带有超时的 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 可能非常无情，很难排除故障，因为如果你犯了一个错误，地图就无法一起显示，我真的很茫然。

知道我做错了什么吗？

#firstpost :)

Answer 1

此答案基于标记连续下降并带有 'rainfall' 效果。

根据您更新的comment，我更新了最后一个JSFiddle，以反映您对问题的明确性。

我基本上交换了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 下。

Answer 2

此答案基于 OP 的原始问题，即在设定时间后同时删除所有标记

我已经用修复更新了JSFiddle。就像Google Marker Animation Demo 一样，您只需为将标记实例化到地图的部分添加一个设置超时。

我将关键部分封装在一个匿名函数中，并在 DOM 和 Google Maps API 准备就绪后 1 秒调用，最后使用 google.maps.event.addDomListener(window, 'load', initialize );。