javascript - Angular - Javascript - 错误：找不到变量：重新加载页面后的谷歌

Question

我使用 Angular 2+ 构建了一个网站，并将 Google Maps Api 包含在我的 index.html 文件中：

<script
      async
      defer
      src="//maps.googleapis.com/maps/api/js?[myKey]&libraries=places">
</script>
<script src="//unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>

仅在 Iphone 上重新加载页面后，地图不会显示，并且出现错误：“找不到变量：google”

在 PC 和 Android 上运行良好。

我能做些什么来解决这个错误？

标签： javascriptangulargoogle-mapsvariablesgoogle-maps-api-3

Answer 1

看起来脚本乱序运行，这是异步脚本加载的一个主要问题。defer带有or属性的第一个脚本async在浏览器继续运行时并行加载，并且仅在加载后执行，而第二个（同步）脚本阻塞浏览器并在加载后立即运行（这发生在第一个脚本执行之后或之前，因此顺序是不可预测的）。

要保持顺序，请添加defer到第二个脚本并async从第一个脚本中删除（使两者相等defer并因此按顺序），或者从第一个脚本中删除defer并async使其正常加载。