Question

我正在使用以下代码在IE9中异步加载Google Maps API脚本：

function initialize() {
  ...
}

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;

现在的问题是，当脚本完全加载时，会自动调用initialize()函数。但是，如果有时超出了用户配额，则不调用initialize()函数，而不是地图，我们会看到纯白屏幕。

我想检测到这一点并触发我的自定义函数，该函数会显示一些警告："Error!"。

谁能告诉我怎么做？

提前致谢...

Answer 1

正如安德鲁所说，没有直接的方法可以解决这个问题。但是，你至少可以考虑这种可能性。

在合理的时间范围内设置超时（5秒？）。在超时回调函数中，测试是否存在google和/或google.maps。如果它不存在，则假定脚本加载失败。

setTimeout(function() {
  if(!window.google || !window.google.maps) {
    //handle script not loaded
  }
}), 5000);
// Maps api asynchronous load code here.

Answer 2

我终于找到了解决这个问题的方法。 Chad提供了一个很好的解决方案，但唯一的一点就是你不能把这段代码放在callback()函数中，因为如果脚本加载失败，callback()函数永远不会被调用！

基于Chad提到的内容，我终于提出了以下解决方案：

function initialize() {
  ...
}

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";
  setTimeout(function () {
        try{
            if (!google || !google.maps) {
                //This will Throw the error if 'google' is not defined
            }
        }
        catch (e) {
            //You can write the code for error handling here
            //Something like alert('Ah...Error Occurred!');
        }
    }, 5000);
  document.body.appendChild(script);
}

window.onload = loadScript;

这对我来说似乎很好用！：）

Google Maps API异步加载

2 个答案: