google-maps - 需要谷歌地图API

Question

当我尝试在我的应用程序中显示地图时，它在视图中将消息显示为“需要 Google 地图 API”，这是我的代码

   var mapapnel = Ext.create('Ext.Panel', {
                      id: 'mapapnel',
                      height: '100%',
                      width: '100%',
                      fullscreen: true,
                      layout:'fit',
                      layout:'vbox',
                      items: [{
                      xtype: 'toolbar',
                      ui:'light',
                      docked: 'top',
                      title: 'Find location',
                      items: [{
                               text: 'Back',
                               ui: 'back',
                               handler: function() {
                                         Ext.getCmp('homepnl').setActiveItem(1);
                                                   }
                                },{
                                   xtype:'spacer'
                                  }]},
                                 {
                                  xtype:'map',
                                  useCurrentLocation:true
                                 }]});

显示地图需要什么更改？请帮我解决

Answer 1

您需要加载 google maps javascript api。

您可以通过在 index.html 文件中添加代码来做到这一点。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

Answer 2

两件事情

1）包含地图的面板应该是卡片布局。

2）不设置中心地图选项，地图不显示。

根据需要提供Lat & Lng值。

var mapapnel = Ext.create('Ext.Panel', {
          id: 'mapapnel',
          layout:'card',
          items: [{
              xtype: 'toolbar',
              ui:'light',
              docked: 'top',
              title: 'Find location',
              items: [{
                  text: 'Back',
                  ui: 'back',
                  handler: function() {
                     Ext.getCmp('homepnl').setActiveItem(1);
                  }
              }
            ]},
            {
             xtype:'map',
             useCurrentLocation:true,
             mapOptions: {
              zoom: 12,
              zoomControl : true,
              center: new google.maps.LatLng(Lat, Lng),
              disableDefaultUI: true
           }]
});