在 AJAX 请求完成之前加载 Google 地图

Posted 2023-02-23

【中文标题】在 AJAX 请求完成之前加载 Google 地图

【英文标题】：Google maps loading before AJAX requests complete

【发布时间】：2017-07-05 15:41:23

【问题描述】：

我正在使用 Google Maps API 和 rails 5.0.4。

我希望地图以用户位置为中心，并用坐标填充纬度、经度字段。目前，lat, lng 字段填充正确，但地图在异步调用完成之前加载，导致地图位置与坐标不匹配。它确实在刷新后自行修复，但在第一次加载时，异步是一个问题。我试图用一个承诺来设置它，但无法让它发挥作用。

最好的方法是什么？

$(document).ready(function()

      function getUserCoordinates() 
        if (navigator.geolocation) 
          navigator.geolocation.getCurrentPosition(setCoords);
        ;
      ;

      function setCoords(position) 
        lat = position.coords.latitude;
        lng = position.coords.longitude;
        updateUserLat(lat);
        updateUserLng(lng);
        document.getElementById("latitude").value = lat.toFixed(6);
        document.getElementById("longitude").value = lng.toFixed(6);
      ;

      function updateUserLat(lat) 
        $.ajax(
          type: 'PATCH',
          url: '/users/:id',
          data: 'user[latitude]': lat
        );
      ;
      function updateUserLng(lng) 
        $.ajax(
          type: 'PATCH',
          url: '/users/:id',
          data: 'user[longitude]': lng
        );
      ;

      getUserCoordinates();

      function initMap()
          initialize();
      ;

);

【参考方案1】：

从文档就绪包装器中移动 initMap() 函数。设置纬度/经度后直接调用 initMap。

将它放在文档就绪包装器中将在页面加载时调用以初始化地图，这是您不想要的。

【讨论】：

谢谢马克。我将 initMap 移到了包装器之外，现在直接调用它。但是，我设置地图的方式是使用从用户模型中读取的中心坐标进行初始化。所以我希望 AJAX 请求完成，确保在地图加载之前用户模型已经更新。所以目前，地图仍然在模型更新之前加载。