如何检测如果谷歌地图加载成功

How to detect if google map loaded successfully

本文关键字：如果 谷歌地图 加载 成功 检测 何检测      更新时间：2023-09-26

我的网站使用的是google-maps version 3。

我遇到了地图有时不加载的问题，而是它会显示为灰色框，浏览器日志将充满错误-不幸的是，我现在无法获得日志，因为地图又开始工作了。

根据一些研究，问题是由于我使用的实验版本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>

是否有一种方法可以发现地图是否已成功加载或崩溃，以便我可以告诉用户尽快回来?

注:我尝试了空闲事件，但即使在地图崩溃时也调用了

我认为最好或最确定的方法是结合tilesloaded事件和延迟函数来测试是否设置了"成功标志"。

/* flag to indicate google maps is loaded */
googleMapsLoaded = false;
/* listen to the tilesloaded event
   if that is triggered, google maps is loaded successfully for sure */
google.maps.event.addListener(map, 'tilesloaded', function() {
   googleMapsLoaded = true;
   //clear the listener, we only need it once
   google.maps.event.clearListeners(map, 'tilesloaded');
});
/* a delayed check to see if google maps was ever loaded */
setTimeout(function() {
  if (!googleMapsLoaded) {
     //we have waited 5 secs, google maps is not loaded yet
     alert('google maps is not loaded');
  }    
}, 5000);

改为监听" tiesloaded "事件。当一个map(成功)加载并且你正在实际显示一个map时，它是最后一个触发的事件。

如果没有映射(例如你没有明确设置宽度/高度)，这个事件不会触发，即使idle触发。

您可以使用Map Events示例并在Network选项卡中限制连接以进行一些测试。下面是相同的示例，宽度/高度未设置为#map.

在空闲情况下，对map对象执行以下操作:

检查:

使用if (typeof google === 'object' && typeof google.maps === 'object') {...}检查是否加载成功

然后检查if(map.getCenter) { var latlng = map.getCenter(); //check here if latlng is object }

如果" If "条件中的任何一个失败，则说明出现了问题。

相关文章：