javascript - 无法使用 GMapPanel 加载 Google map - 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
        });

问题

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

更新 这是我截取的屏幕截图，页面应该加载谷歌地图，但是是空白的

Answer 1

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

如下修改你的 map 代码

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'}
        }
    });