谷歌地图回调未加载？

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。

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

<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属性并行加载脚本，但保留执行顺序（在正常的浏览器中）。

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