Question

我使用this technique加载Google地图，代码大致如下（使用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() Documentation

Answer 2

你可以尝试这样的事情，（Demo）：

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) });
});

Google Maps JS v3：检测负载故障

2 个答案: