谷歌地图API异步加载

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

正如Andrew所提到的，没有直接的方法来处理这个问题。不过，你至少可以考虑一下这种可能性。

在合理的时间范围内设置超时（5秒？）。在timeout回调函数中，测试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()函数永远不会被调用！

因此，根据乍得所提到的，我最终提出了以下解决方案：

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;

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