Google地图回调没有加载？

Question

Google提供此脚本来初始化Google地图：

<script async defer src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">

我想关注的部分是：

callback=initMap

由于脚本正在加载async defer并且是非阻塞的，因此在保存此函数的文件尚未加载时调用initMap回调时实际发生了什么？

假设此功能被放入外部文件并在Google地图脚本之后加载。这可能来自另一台服务器，当回调尝试调用该函数时，该服务器可能无法及时加载。

是否尝试调用该函数并失败并仅执行此操作一次？

Answer 1

  

由于脚本正在加载async defer并且是非阻塞的   ，当调用initMap回调时实际发生的事情   保存此功能的文件尚未加载？

您将收到类似 initMap is not defined 的异常。

解决方案是仅使用defer属性以正确的顺序加载JavaScript文件：

<script defer src="https://example.com/initMap.js"></script>
<script defer src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">

defer属性并行加载脚本但保留执行顺序（在理智的浏览器中）。

另一种解决方案是在HTML页面中嵌入initMap功能，并在其后面放置<script defer>或<script async defer>。