setTimeout每次添加標記時

Question

我試圖在谷歌地圖中實現一些「強制動畫」，通過顯示標記被逐個添加。

爲此，我使用了下面的代碼。

function Marker(i) { 
    if(i > locations.length) return;     
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[locations[i][1]].center, 
     radius: citymap[locations[i][1]].population 
    }; 
    cityCircle = new google.maps.Circle(populationOptions); 

    var t = setTimeout("Marker("+(i+1)+")",2000); 
} 
Marker(0); 

我已經採取本實施例中從：Here，但螢火蟲說，功能標記不是上的setTimeout的線所限定（）;

任何想法？

更新的代碼：

function Marker(city) { 
    alert(city); 
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: citymap[city].population 
    }; 
    cityCircle = new google.maps.Circle(populationOptions); 
} 

for (city in citymap) { 
    var t = setTimeout(function(){Marker(city);},2000); 
} 

我認爲每一次標記叫，它會具有2秒的延遲，但事實並非如此。它等待2秒鐘，然後一次運行。此外，「城市」不更新，在城市地圖中添加相同標記x倍城市數量。

for循環不等待超時完成？

Answer 1

使用類似這樣

var count = 0; 
function Marker() { 
    city = Object.keys(citymap)[count]; 
    alert(city); 
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: citymap[city].population 
    }; 
    cityCircle = new google.maps.Circle(populationOptions); 
    count++; 
} 
var i =1; 
for (var city in citymap) { 
    var t = setTimeout(function(){Marker();},i*2000); 
    i++; 
} 

而且你已經cityMap中聲明爲var citymap = {} ...修改它var citymap = [];在線路38

Answer 2

如果你想有一個新的城市加入每2秒，而不是重複調用您的標記功能可按它做處理--cityMap中的所有項目，你可以做以下的（也擺脫了全球反變量）

function Marker(count) { 
    city = Object.keys(citymap)[count]; 
    console.log(city); 
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: citymap[city].population 
    }; 
    cityCircle = new google.maps.Circle(populationOptions); 
    count++; 
    if(count<citymap.length){ 
     setTimeout(function(){Marker(count);},2000); 
    } 
} 
Marker(0); 

即使