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

希望這有助於:)