Javascript 如何在加载google.maps.OverlayView派生类之前等待google maps API加载完毕

我有一个单独的label.js文件，其中定义了一个自定义覆盖。它使用google.maps.OverlayView作为原型：

Label.prototype = new google.maps.OverlayView();

我不确定在index.html文件中该js文件的脚本标记放在哪里。如果我将脚本标记放在google maps加载标记下面，如下所示：

....
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?...
        </script>
        <script src="js/label.js"></script>
    </body>
</html>

---

这是解决此问题的最佳方法吗？

您应该在API调用中包含回调函数

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myFunction"></script>

如果您需要等待地图“就绪”，即显示地图选项和“空闲”，您可以使用：

google.maps.event.addListenerOnce(map, 'idle', function () {
    // map is ready
});

---

但您仍应将其包含在回调函数中。

这是我制作的一个泛型，适用于我

1） 定义加载Google maps后要执行的函数

function ToExecuteAfterLoaded()
  {
  // Doing something here ///
  console.log("Executing this function"); // per example //
  }

2） 等待函数

function WhenGoogleLoadedDo(fnt)
   {
   if(typeof google != 'undefined')
      fnt();
   else
      setTimeout(function()
         {(function(fnt)
            {
            WhenGoogleLoadedDo(fnt)
            })(fnt)}, 500); // You can set timer as you wish //
   }

3） 在脚本中这样调用ToExecuteAfterLoaded

WhenGoogleLoadedDo(ToExecuteAfterLoaded);

---

用DOMContentLoaded包装您的自定义标签怎么样

      document.addEventListener("DOMContentLoaded", function(event) {
            Label.prototype = new google.maps.OverlayView();
      });

参考：

---

更新旧问题；在React中，我使用了NPM模块：

在意识到这存在并可以节省一些时间之前，我开始自己动手做这件事

它将以promise格式加载mapsapi，因此您可以在加载后提供回调函数

loadGoogleMapsApi().then(function (googleMaps) {
  new googleMaps.Map(document.querySelector('.map'), {
    center: {
      lat: 40.7484405,
      lng: -73.9944191
    },
    zoom: 12
  })
}).catch(function (error) {
  console.error(error)
})

---

我知道太晚了，但我使用下面的代码

var mapWaitCount = 0;
var mapWaitMax = 5;

function map_load(param1, param2, ...) { // if you need any param
    mapWaitCount++;
    // if api is loaded
    if(typeof google != 'undefined') {
        // your code here 
    }
    // try again if until maximum allowed attempt
    else if(mapWaitCount < mapWaitMax) {
        console.log('Waiting attempt #' + mapWaitCount); // just log
        setTimeout(function() { map_load(); }, 1000);
    }
    // if failed after maximum attempt, not mandatory
    else if(mapWaitCount >= mapWaitMax) {
        console.log('Failed to load google api');
    }
}

map_load(param1, param2, ...) { // if you need any param

var-mapWaitCount=0；
var-mapWaitMax=5；
函数映射_load（param1，param2，…）{//如果需要任何参数
mapWaitCount++；
//如果加载了api
如果（谷歌的类型！=“未定义”）{
//你的代码在这里
}
//如果已达到允许的最大尝试次数，请重试
else if（mapWaitCount=mapWaitMax）{
log（'未能加载google api'）；
}
}
map_load（param1，param2，…）{//如果需要任何参数

---

它使用超时等待加载，并且在多次尝试后，它将被停止

我认为这是异步加载maps API的最佳方式Lyno。因为此时google仍然没有定义。您必须使用脚本URL的回调。

是的，脚本是异步加载的，因此您的解决方案只有在您设置了一个手动超时。我在10分钟前遇到了这个问题：3不好。在加载domcontentloaded之前不保证运行Async。只有defer是。

loadGoogleMapsApi().then(function (googleMaps) {
  new googleMaps.Map(document.querySelector('.map'), {
    center: {
      lat: 40.7484405,
      lng: -73.9944191
    },
    zoom: 12
  })
}).catch(function (error) {
  console.error(error)
})

var mapWaitCount = 0;
var mapWaitMax = 5;

function map_load(param1, param2, ...) { // if you need any param
    mapWaitCount++;
    // if api is loaded
    if(typeof google != 'undefined') {
        // your code here 
    }
    // try again if until maximum allowed attempt
    else if(mapWaitCount < mapWaitMax) {
        console.log('Waiting attempt #' + mapWaitCount); // just log
        setTimeout(function() { map_load(); }, 1000);
    }
    // if failed after maximum attempt, not mandatory
    else if(mapWaitCount >= mapWaitMax) {
        console.log('Failed to load google api');
    }
}

map_load(param1, param2, ...) { // if you need any param