谷歌地图 JS v3:检测加载故障

Question

我使用这种技术加载谷歌地图，代码大致如下（使用 jQuery）：

            $.ajax({
                url: "//maps.googleapis.com/maps/api/js?client=" + GOOGLE_MAPS_CLIENT_ID + "&v=" + GOOGLE_MAPS_API_VERSION + "&sensor=false&libraries=geometry&callback=googleMapsOnLoad",
                crossdomain: true,
                dataType: 'script'
            });

其中window.googleMapsOnLoad是我成功加载的处理程序。

它

通常工作正常，但有时对于我的一些用户来说，据我所知，它只是无法正确加载。有没有办法附加一个错误回调，如果加载以某种方式失败，它将触发？

Answer 1

没有真正的检查方法，因为有时加载某些资源（处理器、连接速度等）可能需要很长时间。处理此问题的一种方法是在有限的时间（以下建议 5 秒）设置适当的超时。

function checkGMapsLoad() {
    if( !window.googleMapsOnLoad ) {
        //Error, Google Maps hasn't loaded yet. Reload page?
        //Stuff to perform here
    }
}
window.setTimeout( checkGMapsLoad, 5000 );

编辑：由于您使用jQuery进行调用，因此jQuery.ajax()有一个参数error，可以在回调失败时使用。

            $.ajax({
                url: "//maps.googleapis.com/maps/api/js?client=" + GOOGLE_MAPS_CLIENT_ID + "&v=" + GOOGLE_MAPS_API_VERSION + "&sensor=false&libraries=geometry&callback=googleMapsOnLoad",
                crossdomain: true,
                dataType: 'script',
                timeout: 5000,          // <------ Optional
                error: checkGMapsLoad  // <------
            });

jQuery.ajax（） 文档

Answer 2

你可以尝试这样的东西，（演示）：

function initialize()
{
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

对于跨域脚本代码，error 事件不会触发，因此使用 window.setTimeout：

$(function(){
    var timeoutId;
    timeoutId = window.setTimeout(function() {
        alert("Script Error!");
    }, 2000);
    var url = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize';
    $.getScript(url, function(){ window.clearTimeout(timeoutId) });
});