setTimeout 标记动画 - 似乎没有任何效果

Question

感谢您阅读本文...

我已经搜索和试验了 3 天，试图解决一个非常基本的 javascript 问题。

我正在创建一个包含 45 个标记的 Google 地图。标记：

• 使用 MarkerClusterer 实用程序进行聚类
• 可以点击打开一个信息窗口（每个窗口显示不同的图像）
• 页面加载时，所有内容都“放置”到位。

到目前为止一切顺利。

问题在于应用“setTimeout”函数来顺序删除标记（而不是一次全部删除）。我已经尝试了十几种变体，没有任何效果。

我是一个新手，任何帮助将不胜感激！

您可以在以下位置查看地图的简化版本：

http://www.domatchaworld.com/googlemap6.html

代码如下：

var locations = [  
[39.11009, -120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
[37.77493, -122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
[48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
[48.77734, -121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
[49.35365, -123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
]; 

var map;
var markers = [];
var mc; 
var mcOptions = {
  gridSize: 20,
  maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 3,
center: new google.maps.LatLng(31.65338, -40.42969),
mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

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

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

var marker;
var i;

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

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

mc.addMarkers(markers, true);

markers.push(marker); //push local var marker into global array

}

Answer 1

不要一次将所有标记添加到MarkerClusterer，而是创建标记数组，然后为它们设置动画（我已经复制粘贴了您的代码并在最后添加了 cmets...）：

var locations = [
    [39.11009, - 120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
    [37.77493, - 122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
    [48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
    [48.77734, - 121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
    [49.35365, - 123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
];

var map;
var markers = [];
var mc;
var mcOptions = {
    gridSize: 20,
    maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 3,
    center: new google.maps.LatLng(31.65338, - 40.42969),
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

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

google.maps.event.addListener(map, 'click', function () {
    infowindow.close();
});

var marker;
var i;

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

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

    //don't add to cluster yet
    //mc.addMarkers(markers, true);

    markers.push(marker); //push local var marker into global array

}

// now animate and add to cluster
(function animateNextMarker() {
  if (markers.length > 0) {
    mc.addMarker(markers.pop(), true);
    setTimeout(animateNextMarker, 250);
  }
})();

希望这会有所帮助:)