如何在移动设备的混合应用程序中使用 google 地图 API

Question

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

Answer 1

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

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

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

因此，正如您所说，当您重新在线时，您的脚本将加载并且您的 google 地图 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 );
            }
        }
}

如何在移动设备的混合应用程序中使用 google 地图 API

How use google map API in hybrid app for mobile device

google-maps

sencha-touch

offline

hybrid-mobile-app