使用 geoxml3.js 和 ProjectedOverlay.js 显示 KMZ 文件时出现 Google is undefined 错误

Question

我有一个使用 Google 地图 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 次我加载页面就会发生一次。

Answer 1

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

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

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

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

Answer 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>

使用 geoxml3.js 和 ProjectedOverlay.js 显示 KMZ 文件时出现 Google is undefined 错误

Google is undefined error when using geoxml3.js and ProjectedOverlay.js to display KMZ file

javascript

google-maps-api-3

geoxml3