Google maps 如何创建ExtJS谷歌地图？

我尝试了下面的代码来创建谷歌地图，但没有成功。我正在开发ExtJS5.2

这是我的代码：

{
    xtype: 'mapPanel',
    title: 'Google Map',
    align: 'middle',
    padding: 10,
    pack: 'center',
    items: [{
        xtype: 'map',
        height: 300,
        width: 500,
        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
        center: {
            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
            marker: {
                title: 'Fenway Park'
            }
        },
        markers: [{
            lat: 42.339641,
            lng: -71.094224,
            title: 'Boston Museum of Fine Arts',
            listeners: {
                click: function (e) {
                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                }
            }
        }, {
            lat: 42.339419,
            lng: -71.09077,
            title: 'Northeastern University'
        }]
    }]
}

{
    xtype: 'gmappanel',
    center: {
        lat: 22.785639,
        lng: 72.549574
    },
    mapOptions: {
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoom: 6
    },
    markers: [{
        lat: 22.785639,
        lng: 72.549574,
        title: 'Ahmedabad',
        listeners: {
            click: function (e) {
                Ext.Msg.alert('It\'s fine', 'and it\'s art.');
            }
        }
    }, {
        lat: 22.643760,
        lng: 75.845472,
        title: 'Indore'
    }]
}

---

任何帮助都将不胜感激。提前感谢。

在

ExtJS 5.x

中，您需要使用

xtype:gmappanel

在引导/microloader之前，确保在index.html中包含以下脚本标记：-

和require

GMapPanel

：

{
    xtype: 'mapPanel',
    title: 'Google Map',
    align: 'middle',
    padding: 10,
    pack: 'center',
    items: [{
        xtype: 'map',
        height: 300,
        width: 500,
        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
        center: {
            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
            marker: {
                title: 'Fenway Park'
            }
        },
        markers: [{
            lat: 42.339641,
            lng: -71.094224,
            title: 'Boston Museum of Fine Arts',
            listeners: {
                click: function (e) {
                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                }
            }
        }, {
            lat: 42.339419,
            lng: -71.09077,
            title: 'Northeastern University'
        }]
    }]
}

{
    xtype: 'gmappanel',
    center: {
        lat: 22.785639,
        lng: 72.549574
    },
    mapOptions: {
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoom: 6
    },
    markers: [{
        lat: 22.785639,
        lng: 72.549574,
        title: 'Ahmedabad',
        listeners: {
            click: function (e) {
                Ext.Msg.alert('It\'s fine', 'and it\'s art.');
            }
        }
    }, {
        lat: 22.643760,
        lng: 75.845472,
        title: 'Indore'
    }]
}

Ext.require（'Ext.ux.GMapPanel'）

代码片段：

{
    xtype: 'mapPanel',
    title: 'Google Map',
    align: 'middle',
    padding: 10,
    pack: 'center',
    items: [{
        xtype: 'map',
        height: 300,
        width: 500,
        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
        center: {
            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
            marker: {
                title: 'Fenway Park'
            }
        },
        markers: [{
            lat: 42.339641,
            lng: -71.094224,
            title: 'Boston Museum of Fine Arts',
            listeners: {
                click: function (e) {
                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                }
            }
        }, {
            lat: 42.339419,
            lng: -71.09077,
            title: 'Northeastern University'
        }]
    }]
}

{
    xtype: 'gmappanel',
    center: {
        lat: 22.785639,
        lng: 72.549574
    },
    mapOptions: {
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoom: 6
    },
    markers: [{
        lat: 22.785639,
        lng: 72.549574,
        title: 'Ahmedabad',
        listeners: {
            click: function (e) {
                Ext.Msg.alert('It\'s fine', 'and it\'s art.');
            }
        }
    }, {
        lat: 22.643760,
        lng: 75.845472,
        title: 'Indore'
    }]
}


希望这会对您有所帮助/指导。
xtype:“map”属于6版，为什么我的问题被否决了？非常感谢您的大力帮助，但我在我的ExtJS framework 5.1.1 GPL中没有找到Ext.ux.gmappanel所需的文件。我收到此错误，并且只在浏览器的空白屏幕上显示不显示谷歌地图：未捕获的TypeError:无法读取null的属性“zoom”。未捕获的TypeError:无法读取nullShare的属性“getStyle”，因为到目前为止您已经尝试过了。