如何创建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'
}]
}]
}

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

Answer 1

在ExtJS 5.x中，您需要使用xtype: gmappanel。

在引导程序/微加载程序之前，请确保在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'
}]
}

工作示例

希望这对你有帮助/指导。