循环遍历 Gmaps 上的标记时，setTimeout 函数不起作用 API

Question

我正在尝试连续绘制 50 个标记，每个标记之间间隔 2 秒。第一个标记绘制在 GPS 位置 (x, y)，然后两秒后，第二个标记绘制在 GPS 位置 (x + 0.0004, y) 并继续，直到在地图上创建第 50 个标记。

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

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

Answer 1

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

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 上的标记时，setTimeout 函数不起作用 API

setTimeout function not working when looping through markers on Gmaps API

javascript

google-maps

settimeout

google-maps-api-3