Google 地图 setTimeout() 无法使用 AJAX 调用

Question

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

为了解决这个问题，我尝试使用 window.setTimeout()（根据 Google 地图 API docs）但是我无法让它与我的一起工作通过 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);
      }

Answer 1

我会这样更改您的 add_markers 函数：

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

并定义一个新函数以在需要的时间插入标记：

function addMarker(marker, interval) {
  setTimeout(function() { markers.add(marker); }, interval);
}

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

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

Answer 2

目前所有标记都有一个超时。

文档中有一个示例：Marker Animations With setTimeout() 其中包含一个 setMarkerWithTimeout 函数：

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

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

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

Google 地图 setTimeout() 无法使用 AJAX 调用

Google Maps setTimeout() not working with an AJAX call

javascript

ajax

google-maps

settimeout