Google 在使用 geoxml3.js 和 ProjectedOverlay.js 显示 KMZ 文件时出现未定义错误答案

【问题标题】：Google is undefined error when using geoxml3.js and ProjectedOverlay.js to display KMZ fileGoogle 在使用 geoxml3.js 和 ProjectedOverlay.js 显示 KMZ 文件时出现未定义错误
【发布时间】：2017-03-02 18:16:29
【问题描述】：

我有一个使用 Google Maps API JavaScript 来显示地图的网站。我还使用 geoxml3 和 ProjectedOverlay 在地图上显示 KMZ/KML 文件。

我的脚本：

<script async defer src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script>
<script type="text/javascript" src="/js/geoXML/ZipFile.complete.js"></script>
<script type="text/javascript" src="/js/geoXML/geoxml3.js"></script>
<script type="text/javascript" src="/js/geoXML/ProjectedOverlay.js"></script>
<script src="/js/app.js"></script>

加载页面时出现错误：

Uncaught ReferenceError: google is not defined at ProjectedOverlay.js

和

Uncaught ReferenceError: google is not defined at PROJECT_NAME:115

将被抛出。

第 115 行如下：

google.maps.event.addDomListener(window, 'load', initMap);

但是它们并不总是被抛出。这可能每 10 次加载页面就会发生一次。

【问题讨论】：

标签： javascript google-maps-api-3 geoxml3

【解决方案1】：

问题是谷歌脚本正在异步加载。 geoxml3.js 和 ProjectedOverlay.js 需要完全连接并加载 Google Maps API 才能工作。

如果异步加载，其他 JS 脚本之一将在加载 Google API 之前加载，从而引发错误。

简单的解决方案是去掉 Google API 脚本中的异步延迟：

<script src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script>

【讨论】：

【解决方案2】：

是的，当您在加载之前使用 google 时会发生这种情况。这是一个非常常见的问题。所以做一个这样的回调函数：

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

<script>
   function initMap() {
       var mapDiv = document.getElementById('map');
       var map = new google.maps.Map(mapDiv, {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        });
      }
</script>

【讨论】：