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

Posted 2023-02-26

【中文标题】如何在移动设备的混合应用程序中使用谷歌地图 API

【英文标题】：How use google map API in hybrid app for mobile device

【发布时间】：2015-05-30 07:18:07

【问题描述】：

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

【问题讨论】：

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

【参考方案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 );