时间戳

首页 > 解决方案 > Google Maps setTimeout() 不适用于 AJAX 调用

javascript - Google Maps setTimeout() 不适用于 AJAX 调用

问题描述

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

为了解决这个问题，我正在尝试使用window.setTimeout()（根据 Google Maps API docs），但我无法使其与通过 AJAX 调用添加到 Set 的数据一起工作。

我不太清楚如何在我的 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);
      }

标签： javascriptajaxgoogle-mapssettimeout

解决方案

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

推荐阅读