帶超時的谷歌標記丟棄動畫

Question

我正在嘗試為大量 Google 標記創建 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'), {
  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

此答案基於 OP 的原始問題，即在設定時間后同時刪除所有標記

我已經用修復程序更新了JSFiddle 。 就像Google Marker Animation Demo 一樣，您只需要為將標記實例化到地圖的部分添加設置的超時時間。

我將該關鍵部分包裝在一個匿名函數中，並在DOM和 Google Maps API 准備就緒后 1 秒調用google.maps.event.addDomListener(window, 'load', initialize ); 在末尾。

Answer 2

這個答案是基於連續下降的“降雨”效應的標記。

根據您更新的評論，我更新了最后一個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 下。