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得到了这个例子，但Firebug说函数Marker没有在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);
}

我认为每次调用Marker时都会有2秒的延迟，但事实并非如此。等待2秒，然后一次性运行。此外，“城市”没有更新，添加相同的标记x乘以城市地图中的城市数量。

for循环不等待超时结束？

Answer 1

如果您希望每2秒钟添加一个新城市，并且在完成处理城市地图中的所有项目之后不再重复调用您的Marker功能，您可以执行以下操作（也可以删除全局计数器变量）

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

Answer 2

使用类似的东西

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++;
}

您已将城市地图声明为var citymap = {}。在第38行将其修改为var citymap = [];

每次添加标记时都会设置setTimeout

2 个答案: