无法使用GMapPanel加载Google地图 - EXTJS 4

Question

Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.window.MessageBox',
    'Ext.window.*',
    'Ext.ux.GMapPanel'
]);

var map = new Ext.ux.GMapPanel({
            xtype: 'gmappanel',
            region: 'center',
            id:  'mygooglemap',
            zoomLevel: 3,
            gmapType: 'map',
            setCenter: {
                'lat': 37.4419,
                'lng': -122.1419
            }
        });

    var layout = Ext.create('Ext.panel.Panel', {
            //renderTo: 'layout',
            width: window.innerWidth,
            height: window.innerHeight,
            //title: 'Border Layout', //no title will be blank
            layout: 'border',
            items: [{
                title: 'Message List',
                region: 'south',     // position for region
                xtype: 'panel',
                height: 100,
                split: true,         // enable resizing
                collapsible: true,
                margins: '0 5 5 5',
                collapsed: true
            },tree,map],
            renderTo: Ext.getBody() //get the body and display Layout at there
        });

问题

所有加载成功，带有名称树的treepanel也加载成功，只是地图GMapPanel无法显示谷歌地图，为什么？请帮帮我，谢谢。我不知道

UPDATE 这个我拍摄的截图，页面应该加载谷歌地图，但是空白

Answer 1

您可能希望在创建地图时在side setCenter中添加标记对象。

修改您的地图代码，如下所示

var map = new Ext.ux.GMapPanel({
        xtype: 'gmappanel',
        region: 'center',
        id:  'mygooglemap',
        zoomLevel: 3,
        gmapType: 'map',
        mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],   
        setCenter: {
            'lat': 37.4419,
            'lng': -122.1419,
            marker:{ title: 'Palo Alto'}
        }
    });

Answer 2

确保您已添加

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

你的index.html上的

，如果你已经完成了它，如果你使用调试浏览器工具来查找是否有一些你没有发布的错误将会有所帮助