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

Add delay between plots of google map markers

本文关键字：之间 延迟 图标 谷歌 地图 增加      更新时间：2023-09-26

我需要在每个标记之间添加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,
  });
}

这里有两件事出错了。

第一个是使用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:我的代码是未经测试的，但它应该给你正确的想法如何解决你的问题

看起来您可能希望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.

相关文章：