在Google地图标记图之间添加延迟 [英] Add delay between plots of google map markers

问题描述

我需要在每个标记之间添加1秒的延迟。我想出了下面的代码，但不能使它工作。任何想法？

  var latlng = new google.maps.LatLng（43,43）; 
 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]; 
 
 //获取lat / long并将它们放在地图上
 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 +\\\
Longitude：+ long，
}）; 
} 
  

解决方案

就在这儿。

第一个是，你使用setTimeout和一个空函数。你的代码需要在这个函数中：
$ b $ pre $ 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 +\\\
Longitude：+ long，
}）;
}，1000）;
}

第二个是，你的循环依次触发display_marker，所以如果你解决了问题1，即使你的所有标记都会在〜1000ms后生成，一个简单的方法来解决这个问题，就是在你的增量中传递当前值-var到你的显示标记，并将它乘以你的setTimeout：

  var obj，lat，long; 
 for（var i = 0，len = json.length; i< len; i ++）{
 obj = json [i]; 
 
 //获取lat / long并将它们放在地图上
 lat = obj.latitude; 
 long = obj.longitude; 
 
 display_marker（map，lat，long，i）; 
 
 $ b 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 +\\\
Longitude：+ long，
}）; 
}，increment * 1000）; 
} 
  

提示：看看我对变量声明做了什么。你在循环中重新声明变量

提示2：我的代码没有经过测试，但它应该给你正确的想法如何解决你的问题

I need to add a 1 second delay between each plot of my markers. I came up with the following code but cannot make it work. Any idea ?

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

解决方案

there a 2 things going wrong right here.

the first one is, that you use the setTimeout with an empty function. your code needs to be inside that function:

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

the second on is, that your loop triggers the display_marker one after the other, so if you fix problem 1, even then you all your markers will be generated after ~1000ms

an easy way to fix this, is to pass the current value if your increment-var to your display marker, and multiply it for your 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);
}

hint: see what i did with the variable declarations. you were redeclaring the variables inside your loop

hint2: my code is untested, but it should give you the right idea how to solve your problem

这篇关于在Google地图标记图之间添加延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！