使用谷歌地球插件给了我白色地图答案

【问题标题】：Using Google Earth Plugin gives me white map使用谷歌地球插件给了我白色地图
【发布时间】：2013-06-05 08:40:10
【问题描述】：

由于某种原因，当使用带有 EXTJS 的 Google 地球插件时，它只会给我一张白色的地图。

希望我可以发布一张图片，尽管我的声誉需要一些工作。

我在加载我的应用程序时包含以下文件。

https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js

启动文件包含。

google.load("earth", "1");
google.load("maps", "2.xx");

我需要 jsapi 的密钥吗？

请指教。

所有浏览器都给我同样的问题。

【问题讨论】：

我现在尝试在不使用 GEarthPanel 方法的情况下实现插件。面板已经很老了，因为多年来没有人真正致力于它，我想它不再是强制性的了。

标签： extjs4.1 google-earth-plugin sencha-architect

【解决方案1】：

我们在 ExtJs 容器中加载了 GE 插件。 HTML 看起来像：

<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("earth", "1");
</script>

<script type="text/javascript">
   Ext.onReady(function() {
      Globe.initGlobe();
   });
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>

javascript 类设置了一个带有我们可以定位的 div 的容器：

this.globeContainingPanel = Ext.create('Ext.container.Container', {
    ...
    renderTo:   Ext.getBody(),
    items: [{
       {
            xtype: 'panel',
            region: 'center',
            html: '<div id="map3d"></div>'
       }
    }]
});

然后让 GE 渲染到 div 面板：

window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;

google.earth.createInstance('map3d', this.initCallback, this.failureCallback);

另外，请确保您的浏览器中安装了 Google 地球插件。

【讨论】：