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一次，创建数组标记，然后为它们设置动画（我复制粘贴了你的代码并在最后添加了注释...）：

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); 
    } 
})(); 

希望这有助于:)