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

【问题标题】：How use google map API in hybrid app for mobile device如何在移动设备的混合应用程序中使用谷歌地图 API
【发布时间】：2015-05-30 07:18:07
【问题描述】：

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

【问题讨论】：

不，您将无法离线下载 api。这只是一段代码，您可以轻松访问他们的在线服务。我猜，Google 肯定不会免费提供他们的地图数据和所有算法。

标签： google-maps sencha-touch offline hybrid-mobile-app

【解决方案1】：

如果你在离线状态下启动你的应用，脚本标签会抛出一个 net::ERRxxx。你可以在浏览器控制台上看到这个。

稍后，当您再次联机时，那些脚本加载失败，仅此而已。

我已经使用 setTimeout 和谷歌地图回调参数解决了这个问题。基本上，我每 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 );
            }
        }
}

【讨论】：