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 上运行良好。

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

Answer 1

看起来脚本乱序运行，这是异步脚本加载的一个主要问题。defer具有or属性的第一个脚本async在浏览器继续时并行加载，并且仅在加载后执行，而第二个（同步）脚本阻止浏览器并在加载后立即运行（这发生在执行第一个脚本之后或之前，因此顺序是不可预测的）。要保持顺序，请添加defer到第二个脚本并async从第一个脚本中删除（使两者相等defer并因此按顺序），或者从第一个脚本中删除defer并async使其正常加载。