javascript - 通过 Ext.data.connection Sencha Touch 和 Phonegap 在互联网可用时加载谷歌地图 API

Question

我使用 Sencha Touch 和 Phonegap 构建了一个小应用程序。
在此应用中，我需要 google maps API，因为我想显示 map 。

如果设备没有互联网连接就会出现问题，因此无法在 html 中加载 google maps API。所以我检查互联网连接。
如果互联网连接可用，我会尝试使用 Ext.data.connection 加载 google maps API:

var conn = new Ext.data.Connection();
var url = 'http://maps.google.com/maps/api/js?sensor=true&'; 
conn.request({  
     url: url,
     callback: function(options, success, response){
           if(response && response.responseText){
                // do something
           }
     },
     method:'GET'}
);

如果我在谷歌浏览器中测试应用程序，我会收到以下错误:XMLHttpRequest cannot load <a href="http://maps.google.com/maps/api/js?sensor=true&amp" rel="noreferrer noopener nofollow">http://maps.google.com/maps/api/js?sensor=true&amp</a>;_dc=1302077479281. Origin null is not allowed by Access-Control-Allow-Origin.

如果我尝试通过 file:/// 调用 HTML 并不重要或通过网络服务器 ( http://localhost/app )

我怎样才能获得谷歌地图 API 并“绕过”或避免这种访问控制行为？

Answer 1

Hering，抱歉，这不是一个简单的答案。

我认为您想使用条件脚本加载器。这些是只有在满足条件(您有网络连接)时才会将脚本添加到文档的 API。

一个好的是http://yepnopejs.com/

根据该线程，可以加载谷歌地图，但您必须按照线程中的说明进行操作。 Google Maps with YepNope

具体来说，包括 yepnope.js 并删除对谷歌地图的任何引用。

yepnope([{
        load: 'http://www.google.com/jsapi',
        callback: function(){
            google.load("maps", "3", {
                callback: function(){
                    console.log("loaded");
                },
                other_params: "sensor=false"
            });
        }
    }]);

渲染 map 时(必须在 Google map 完全加载后完成)确保添加 Ext.Map 卡，然后调用:

this.doLayout();

我认为这对你很管用，对我也很管用...