google-maps - 如何创建 ExtJS 谷歌地图？

Question

我尝试了下面的代码来创建谷歌地图，但没有奏效。我正在研究 ExtJS 5.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'
        }]
    }]
}

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

标签： google-mapsextjsextjs4.2extjs5

Answer 1

在ExtJS 5.x你需要使用xtype: gmappanel.

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

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

并要求GMapPanel：

Ext.require('Ext.ux.GMapPanel');

代码片段：

{
    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'
    }]
}

工作示例

希望这会帮助/指导你。