在异步加载 Google 地图时处理网络断开连接答案

【问题标题】：Handling network disconnect while loading Google maps asynchronously在异步加载 Google 地图时处理网络断开连接
【发布时间】：2012-06-20 08:20:17
【问题描述】：

尝试异步加载 Google 地图，以便更快地启动 HTML 页面。

已使用链接中提到的以下代码：https://developers.google.com/maps/documentation/javascript/tutorial#asynch。部分：异步加载 API。

function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

问题：

调用loadScript()函数后网络断开时。目前我们找不到任何方法来检查网络连接是否已终止并进行适当的错误处理。
即使网络有时可用，回调函数“initialize()”也不会被调用。
即使在 3G 网络上，移动设备上谷歌地图的加载速度也很慢。

在上述两种情况下，我们都会在调用loadScript() 后立即启动加载图标。由于initialize() 没有被回调，它会在加载图标中无限期地阻塞。

请提供一些指针来处理网络断开和回调函数未调用问题。

【问题讨论】：

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

【解决方案1】：

Maps API 没有处理此问题的本地方法。值得庆幸的是 HTML5 做到了。监听 document.online / document.offline 事件非常有效，我已经用它解决了这个问题。

见https://developer.mozilla.org/en/DOM/document#Event_handlers

这至少在 iOS 5 和 Android 2.3 中受支持。

您还可以使用 setTimeout 来检查 API 回调是否发生，如果没有发生则适当处理。

【讨论】：