Javascript Google Maps setTimeout（）无法使用AJAX调用

我正在构建一个基于视口边界在地图上放置标记的web应用程序。当用户移动地图时，标记会按预期下降，但它们会同时下降，我希望它们能连续下降

为了解决这个问题，我尝试使用

window.setTimeout（）

（根据Google Maps API），但是我在处理通过AJAX调用添加到集合中的数据时遇到了问题

我不太确定如何在我的JS代码中构造window.setTimeout（）函数，这比Google的示例更复杂。我尝试了几十种不同的变体，但都没有成功

下面是JavaScript：

var markers = new Set();
var marker, i;

[...] 

google.maps.event.addListener(map, "bounds_changed", () => {
              var lat0 = map.getBounds().getNorthEast().lat();
              var lng0 = map.getBounds().getNorthEast().lng();
              var lat1 = map.getBounds().getSouthWest().lat();
              var lng1 = map.getBounds().getSouthWest().lng();

              $.ajax({
                type: 'GET',
                url: '/electra/marker_info/',
                data: {
                  'neLat': parseFloat(lat0),
                  'neLng': parseFloat(lng0),
                  'swLat': parseFloat(lat1),
                  'swLng': parseFloat(lng1)
                },
                success: function (data) {
                    add_markers(data, i * 200); 
                }
              });
            });

          [...]
function add_markers(ajaxData, timeout) {
        window.setTimeout(() => {
        for (i = 0; i < ajaxData.length; i++) { //puts markers in the markers set
          if(! markers.has(JSON.stringify(ajaxData[i]))) {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(ajaxData[i][2], ajaxData[i][3]),
                map: map,
                animation: google.maps.Animation.DROP,
              })

             [...]

              markers.add(JSON.stringify(ajaxData[i]));
            }
          }
        }, timeout);
      }

var markers=新集合（）；
var标记，i；
[...] 
google.maps.event.addListener（映射，“边界已更改”，（）=>{
var lat0=map.getBounds（）.getNorthEast（）.lat（）；
var lng0=map.getBounds（）.getNorthEast（）.lng（）；
var lat1=map.getBounds（）.getSouthWest（）.lat（）；
var lng1=map.getBounds（）.getSouthWest（）.lng（）；
$.ajax({
键入：“GET”，
url:“/electra/marker_info/”，
数据：{
“neLat”：parseFloat（lat0），
“neLng”：解析浮点（lng0），
“swLat”：parseFloat（lat1），
“swLng”：解析浮点（lng1）
},
成功：功能（数据）{
添加_标记（数据，i*200）；
}
});
});
[...]
函数添加标记（ajaxData，超时）{
window.setTimeout（（）=>{
对于（i=0；i

我将通过以下方式更改您的

添加标记功能：

function add_markers(ajaxData, timeout) {
  for (let i = 0; i < ajaxData.length; i++) { //puts markers in the markers set
    if(! markers.has(JSON.stringify(ajaxData[i]))) {
      let marker = new google.maps.Marker({
          position: new google.maps.LatLng(ajaxData[i][2], ajaxData[i][3]),
          map: map,
          animation: google.maps.Animation.DROP,
      })
      [...]
     
     // here you increase the delay based on current number or markers
     addMarker(JSON.stringify(ajaxData[i]), timeout * markers.size);
  }
} 

基本上，您将
setTimeout
移动到负责从处理从Ajax调用获得的数据的函数中实际插入标记的函数。
下面的行将确保立即插入第一个标记（
marker.size
为0）；下一个将以
超时插入
彼此之间的距离

addMarker(JSON.stringify(ajaxData[i]), timeout * markers.size);

当前，所有标记都有一个超时

文档中有一个示例：包括
setMarkerWithTimeout
函数：

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(() => {
    markers.push(
      new google.maps.Marker({
        position: position,
        map,
        animation: google.maps.Animation.DROP,
      })
    );
  }, timeout);
}

这可以在代码中使用，但您需要更改它使用的
标记
数组，因为您有一个
标记
数组，该数组包含不同的数据，用于不同的目的（如果不需要对
google.maps.Marker
对象的引用，您可能可以从该函数中删除
标记

函数添加标记（ajaxData，超时）{
对于（i=0；i
您能否澄清：您希望在
超时后删除每个标记
？因此，例如，每个
超时
间隔，向mapI添加一个标记都希望标记一个接一个地删除，而不是一次全部删除（当前大量标记一次删除）。根据谷歌文档，这是通过
setTimeout（）
实现的。我知道有一个例子（我在问题中链接到了它），但我无法通过参考文档来解决问题。如果可以，我不会在这里花费人们的时间。谢谢。
function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(() => {
    markers.push(
      new google.maps.Marker({
        position: position,
        map,
        animation: google.maps.Animation.DROP,
      })
    );
  }, timeout);
}

function add_markers(ajaxData, timeout) {
  for (i = 0; i < ajaxData.length; i++) { //puts markers in the markers set
    if(! markers.has(JSON.stringify(ajaxData[i]))) {
      addMarkerWithTimeout(new google.maps.LatLng(ajaxData[i][2], ajaxData[i][3]), timeout);

      [...]

      markers.add(JSON.stringify(ajaxData[i]));
    }
  }
}