Question

我需要在每个标记图之间添加1秒的延迟。我想出了以下代码，但无法使其正常工作。有什么想法吗？

var latlng = new google.maps.LatLng(43,2.34);
var myOptions = {
  zoom: 7,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for ( var i=0, len=json.length; i<len; i++ ){
  obj = json[i];

  // Get lat / long and put them on the map
  var lat = obj.latitude;
  var long = obj.longitude;

  display_marker(map, lat, long);
}

display_marker = function(map, lat, long){
  setTimeout(function(){}, 1000);
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(lat,long),
    title: "Latitude: " +  lat + "\nLongitude: " + long,
  });
}

Answer 1

这里有两件事情出错了。

第一个是，你使用带有空函数的setTimeout。你的代码需要在函数内部：

display_marker = function(map, lat, long){
  setTimeout(function() {
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(lat,long),
      title: "Latitude: " +  lat + "\nLongitude: " + long,
    });
  }, 1000);
}

第二个是，你的循环一个接一个地触发display_marker，所以如果你修复了问题1，那么你所有的标记都会在~1000ms之后生成

解决此问题的一种简单方法是，如果您的increment-var到显示标记，则传递当前值，并将其乘以setTimeout：

var obj, lat, long;
for ( var i=0, len=json.length; i<len; i++ ){
  obj = json[i];

  // Get lat / long and put them on the map
  lat = obj.latitude;
  long = obj.longitude;

  display_marker(map, lat, long, i);
}

display_marker = function(map, lat, long, increment){
  setTimeout(function() {
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(lat,long),
      title: "Latitude: " +  lat + "\nLongitude: " + long,
    });
  }, increment * 1000);
}

提示：看看我对变量声明的处理方式。你在循环中重新声明了变量

提示2：我的代码未经测试，但它应该为您提供正确的解决问题的方法

Answer 2

在继续运行setTimeout中的后续行之前，您可能希望display_marker阻止执行。 setTimeout通过向执行堆栈添加一个应该在指定时间内执行的进程来工作，尽管它不是非常精确。

看起来你要做的是在迭代值时将display_marker的引用传递给setTimeout。

setTimeout(function() {
  display_marker(map, lat, long);
}, 1000);

John Resig撰写了一篇关于JavaScript定时器的精彩博文，我发现它非常有用：http://ejohn.org/blog/how-javascript-timers-work/。有关通过setTimeout传递参数的信息，请参阅此SO答案：https://stackoverflow.com/a/1190656/609206。

添加谷歌地图标记之间的延迟

2 个答案: