在异步加载谷歌地图时处理网络断开连接

Handling network disconnect while loading Google maps asynchronously

本文关键字：网络 断开 连接 处理 异步 加载 谷歌地图      更新时间：2023-09-26

尝试异步加载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;

问题：

  1. 调用loadScript()函数后断开网络时。 目前我们找不到无论如何检查网络连接是否已终止并进行适当的错误处理。

  2. 即使网络有时可用，也不会调用回调函数'initialize()'。

  3. 即使在3G网络上，在移动设备上加载谷歌地图的速度也非常慢。

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

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

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

请参阅 https://developer.mozilla.org/en/DOM/document#Event_handlers

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

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

相关文章：