在循环Gmaps API上的标记时，setTimeout函数不起作用 [英] setTimeout function not working when looping through markers on Gmaps API

问题描述

我试图在每个标记之间连续绘制50个标记，间隔2秒。第一个标记绘制在GPS位置（x，y），然后两秒钟后，第二个标记绘制在GPS位置（x + 0.0004，y），并持续到地图上创建第50个标记。

我将标记构造函数放在setTimeout函数中。 setTimeout函数放在for循环中。然而，当我运行这个时，循环瞬间通过50个标记（即没有每个标记之间的2秒延迟）。任何建议，我哪里出错了？

  var map; 
 var longi = 174.7660981; 
 
函数initialize（）{
 
 var mapProp = {
 //地图属性
}; 
 
 //创建地图对象
 map = new google.maps.Map（document.getElementById（googleMap），mapProp）; 
 
 //通过setTimeout / Marker构造函数循环
 for（i = 0; i <50; i ++）{
 window.setTimeout（function（）{
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（-36.8606873，longi），
 map：map 
}）; 
 longi + = 0.0004; 
}，2000）; 
} 
} 
 
 google.maps.event.addDomListener（window，load，initialize）; 
  

解决方案

setTimeout工作正常。你延迟所有的标记2秒（延迟不在它们之间）。

  var map; 
 var longi = 174.7660981; 
 
函数initialize（）{
 
 var mapProp = {
 //地图属性
}; 
 
 //创建地图对象
 map = new google.maps.Map（document.getElementById（googleMap），mapProp）; 
 
 //通过setTimeout / Marker构造函数循环
 for（i = 0; i <50; i ++）{
 window.setTimeout（function（）{
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（-36.8606873，longi），
 map：map 
}）; 
 longi + = 0.0004; 
}，2000 * i）; 
} 
} 
 
 google.maps.event.addDomListener（window，load，initialize）; 
  

= {center：{lat：0，lng：0}，zoom：15}; //创建地图对象map = new google.maps.Map（document.getElementById（googleMap），mapProp）; //通过setTimeout / Marker构造函数循环（i = 0; i <50; i ++）{window.setTimeout（function（）{var marker = new google.maps.Marker（{position：new google.maps.LatLng -36.8606873，longi），map：map}）; longi + = 0.0004; map.setCenter（marker.getPosition（））;}，2000 * i）; }} google.maps.event.addDomListener（window，load，initialize）;

  body，html，#googleMap {height：100％;宽度：100％; }  

< script src =https：// maps .googleapis.com / maps / api / js>< / script>< div id =googleMap>< / div>

I am trying to draw 50 markers in a row with 2 seconds in between each marker. The first marker gets drawn in GPS position (x, y) and then two seconds later, the second marker gets drawn in GPS position (x + 0.0004, y) and continues until the 50th marker is created on the map.

I have placed the marker constructor inside a setTimeout function. The setTimeout function is placed inside a for loop. However, when I run this, the loop runs through the 50 markers instantaneously (ie without the 2 second delay between each marker). Any suggestions on where I am going wrong?

var map;
var longi = 174.7660981;

function initialize(){

    var mapProp = {
        //map properties
    };

    //create map object
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    //loop through setTimeout/Marker constructor
    for(i = 0; i < 50; i++){
        window.setTimeout(function(){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-36.8606873, longi),
                map: map
            });
            longi += 0.0004;
        }, 2000);
    }
}

google.maps.event.addDomListener(window, "load", initialize);

解决方案

setTimeout is working fine. You are delaying all your markers by 2 seconds (the delay isn't between them).

var map;
var longi = 174.7660981;

function initialize(){

    var mapProp = {
        //map properties
    };

    //create map object
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    //loop through setTimeout/Marker constructor
    for(i = 0; i < 50; i++){
        window.setTimeout(function(){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-36.8606873, longi),
                map: map
            });
            longi += 0.0004;
        }, 2000*i);
    }
}

google.maps.event.addDomListener(window, "load", initialize);

var map;
var longi = 174.7660981;

function initialize(){

    var mapProp = {
        center: {lat:0, lng:0},
      zoom: 15
    };

    //create map object
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    //loop through setTimeout/Marker constructor
    for(i = 0; i < 50; i++){
        window.setTimeout(function(){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-36.8606873, longi),
                map: map
            });
            longi += 0.0004;
          map.setCenter(marker.getPosition());
        }, 2000*i);
    }
}

google.maps.event.addDomListener(window, "load", initialize);

body, html, #googleMap {
  height: 100%;
  width: 100%;
  }

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

这篇关于在循环Gmaps API上的标记时，setTimeout函数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！