需要谷歌地图API

Posted 2023-02-25

【中文标题】需要谷歌地图API

【英文标题】：Google maps API required

【发布时间】：2013-09-18 14:03:55

【问题描述】：

当我尝试在我的应用程序中显示地图时，它在视图中将消息显示为“需要 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
                                 ]);

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

【参考方案1】：

您需要加载 google maps javascript api。

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

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

【讨论】：

我已经在 index.html 中添加了。但是现在地图视图显示空白屏幕

看看这个..w3schools.com/googleAPI/google_maps_basic.asp 在 div 中包含地图并使用 height:100%

Fazil，你能看到地图控件，即缩放按钮和平移按钮吗？

@Rickert 是的，我想使用缩放按钮

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

【讨论】：

地图正在显示，但无法放大或缩小。还需要做什么

@Fazil 将缩放值设置为 0 或 12，以获得完整的缩放功能。