Extjs4 百度地图

前段时间,开发需要百度地图,底层用Extjs 4.0.7 版本,想进行融合封装下,上网查了很多资料,基本没有Extjs4 封装百度地图的例子,都是直接用的api嵌入页面,这样并不能满足需求。

然后我看了下extjs ux 扩展控件里,有个谷歌地图控件,我便仿照谷歌控件封装了一个百度地图控件,以后只需要对这个百度控件进行扩展就可以了,下面分享下源码,纯手打,纯原创,author:DEMON

首先:在html页面里面要引用百度地图api,我使用的是2.0大众版本.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请"></script>

以下是地图控件封装(只封装了控件和标记):

 1 /**
 2  * @class Ext.ux.BMapPanel
 3  * @extends Ext.Panel
 4  * @author DEMON
 5  */
 6 Ext.define(‘Ext.ux.BMapPanel‘, {
 7     extend: ‘Ext.Panel‘,
 8 
 9     alias: ‘widget.bmappanel‘,
10 
11     requires: [‘Ext.window.MessageBox‘],
12 
13     initComponent: function () {
14         Ext.applyIf(this.bmap, this.config);
15         this.callParent();
16     },
17 
18     afterRender: function () {
19         //设置panel属性
20         var wh = this.ownerCt.getSize();
21         Ext.applyIf(this, wh);
22         this.callParent();
23 
24         //设置百度地图属性
25         if (this.bmapType === ‘map‘) {
26             this.bmap = new BMap.Map(this.body.dom);
27         }
28 
29         if (this.bmapType === ‘map‘) {
30             this.bmap.centerAndZoom(this.centerCity, this.zoomLevel); //设置初始化中心点
31         }
32 
33         this.onMapReady(); //地图加载项
34     },
35     onMapReady: function () {
36         this.addMapConfigs(); //添加地图属性
37         this.addMapControls(); //添加地图控件
38         this.addMapMarkers(this.markers); //添加标记
39     },
40     getMap: function () {
41         return this.bmap;
42     },
43     addMapMarkers: function (markerArray) {
44         if (Ext.isArray(markerArray)) {
45             for (var i = 0; i < markerArray.length; i++) {
46                 this.addMapMarker(markerArray[i]);
47             }
48         }
49     },
50     addMapMarker: function (markerParam) {
51         var point = new BMap.Point(markerParam.x, markerParam.y); //创建图点
52         var markerBase = new BMap.Marker(point); //创建标记
53 
54         if (markerParam.isDragging == true)
55             markerBase.enableDragging();
56         else
57             markerBase.disableDragging();
58 
59         this.getMap().addOverlay(markerBase); //标记覆盖入地图
60     },
61     addMapControls: function () {
62         debugger
63         if (Ext.isArray(this.mapControls)) {
64             for (var i = 0; i < this.mapControls.length; i++) {
65                 this.addMapControl(this.mapControls[i]);
66             }
67         }
68     },
69     addMapControl: function (controlParam) {
70         debugger
71         var controlBase = new BMap[controlParam.controlName](controlParam);
72         this.getMap().addControl(controlBase);
73     },
74     addMapConfigs: function () {
75         if (Ext.isArray(this.mapConfigs)) {
76             for (var i = 0; i < this.mapConfigs.length; i++) {
77                 this.addMapConfig(this.mapConfigs[i]);
78             }
79         } else if (typeof this.mapConfigs === ‘string‘) {
80             this.addMapConfig(this.mapConfigs);
81         }
82 
83     },
84     addMapConfig: function (configParam) {
85         this.getMap()[configParam]();
86     }
87 });

以下是Ext,调用封装地图:

 

 1 //百度地图类封装
 2 Ext.define(Demon.extend.BMapPanel, {
 3     constructor: function (configParam) {
 4         var configBase = {
 5             bmapType: map,
 6             border: false,
 7             zoomLevel: 15,
 8             centerCity: 南京,
 9             mapConfigs: [enableScrollWheelZoom],
10             mapControls: [{
11                 controlName: ScaleControl,
12                 anchor: BMAP_ANCHOR_TOP_LEFT
13             }, {
14                 controlName: NavigationControl,
15                 anchor: BMAP_ANCHOR_TOP_RIGHT,
16                 type: BMAP_NAVIGATION_CONTROL_SMALL
17             }],
18             markers: [{
19                 x: 118.773834,
20                 y: 32.048698,
21                 isDragging: true
22             }, {
23                 x: 118.79101,
24                 y: 32.057083,
25                 isDragging: false
26             }]
27         };
28 
29         Ext.applyIf(configBase, configParam);
30 
31         return Ext.create(Ext.ux.BMapPanel, configBase);
32     }
33 });

 

 代码很简单,花2分钟看下就能明白,希望能给需要的童鞋一点帮助

无图无真相?好吧,最后补上效果图:

技术分享

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。