Sencha Touch的谷歌地图

Question

我想在我的Sencha Touch应用程序中拥有地图。我在index.html中加载了脚本，我可以看到它处于活动状态，因为浏览器正在查找我的实际位置。

问题是，所有从视图加载，但我可以看到没有地图。

我的看法是这样的：

Ext.define('RMA-App.view.ActivityMap', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.activitymap', 

    initialize: function() { 
     this.callParent(arguments); 

     var backButton = { 
      xtype: 'button', 
      ui: 'back', 
      text: 'Zurück', 
      handler: this.onBackButtonTap, 
      scope: this 
     }; 

     var topToolbar = { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Ort der Aktivität', 
      items: [ 
       backButton, 
       { 
        xtype: 'spacer' 
       } 
      ] 
     }; 

     var map = { 
      xtype: 'map', 
      useCurrentLocation: true 
     }; 

     this.add([ 
      topToolbar, 
      map 
     ]); 
    }, 

    onBackButtonTap: function() { 
     console.log('backToActivityEditorCommand'); 
     this.fireEvent('backToActivityEditorCommand', this); 
    } 
}); 

Answer 1

尝试给一个布局的父容器。根据我的经验，视图上的默认布局不能正确地将地图渲染为小孩。

Ext.define('RMA-App.view.ActivityMap', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.activitymap', 
    config: { 
     layout: { 
      type: 'fit' 
     } 
    }, 

    ... 

顺便说一句，请注意Ext.map从Ext.container继承，所以，如果你正在做的是增加一个工具栏，你可以把它添加到地图容器本身并删除嵌套的水平。