Question

我想下载java Script google map API V3并将其从本地主机加载到HTML文件中，而不是从谷歌API在线链接中使用它们。因为当我从谷歌服务器加载API并且我的设备处于离线状态时，我的应用程序在使用谷歌API方法渲染到项目时出错。我在运行应用程序后在线，但地图不起作用，并且没有加载图像映射。

Answer 1

如果您在离线时启动应用程序，脚本标记将抛出net :: ERRxxx。您可以在浏览器控制台上看到这一点。

稍后，当您重新联机时，这些脚本加载失败，就是这样。

我使用setTimeout和google maps回调参数解决了这个问题。基本上，我每5秒在页面上删除并重新注入脚本标记，并设置谷歌地图回调以停止循环并执行用户回调。

因此，正如您所说，当您重新上线时，您的脚本将会加载，并且您的google maps API将在回调中提供。

试试这个：

loadAPI( function(map) {
    console.log('back to business!');
    //...
}

代码：

    var loadAPITimer = null;

    function loadAPI(callback) {
        var googleMapsScriptId = 'googleMapsScript';

        if ( (typeof(loadAPITimer))==="undefined")  {
            throw('global vars are not defined');
        }

        if (window.google && window.google.maps) { // API already loaded
            window.googleMapsLoadCallback(callback);
            return;
        }
        if (loadAPITimer !== null) { //already running
            return;
        }
        //inject script every 5 seconds
        loadAPITimer = setInterval(function() { injectScript(); },5000);

        //---- LOCAL FUNCTIONS --------------------------------------------
        //---- google maps callback
        window.googleMapsLoadCallback = function(cback) {
            console.log('done! Inside googleMapsLoadCallback');
            if (loadAPITimer) {  //still running, cleanUp
                clearInterval(loadAPITimer);
                loadAPITimer = null;
            } else {
                console.log('google maps already loaded.');
            }
            cback && cback(window.google.maps);
        }
        //---- inject script tag for maps
        function injectScript() {
            if ( window.google && window.google.maps ) {
                console.log('Google Maps Loaded!');
                window.googleMapsLoadCallback(callback);
            }
            else if (window.google && window.google.load) {
                console.log('google is defined: loading maps');
                window.google.load('maps', version || 3, {'other_params': '&sensor=false' , 'callback' : 'googleMapsLoadCallback'});
            }
            else {
                console.log('injecting Google Maps script');
                var script = window.document.getElementById(googleMapsScriptId);
                if (script) {
                    script.parentNode.removeChild(script);
                }
                window.setTimeout( function() {
                    script = window.document.createElement('script');
                    script.id = googleMapsScriptId;
                    script.type = 'text/javascript';
                    script.src = 'http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsLoadCallback';
                    window.document.body.appendChild(script);
                }, 100 );
            }
        }
}

如何在移动设备的混合应用中使用谷歌地图API

1 个答案: