sencha touch 百度地图扩展(2014-6-24)（废弃 仅参考）

扩展代码如下：

  1 Ext.define('ux.BMap', {
  2     alternateClassName: 'bMap',
  3     extend: 'Ext.Container',
  4     xtype: 'bMap',
  5     requires: ['Ext.util.Geolocation'],
  6     config: {
  7         map: null,
  8         /// <summary>
  9         /// 地图初始化配置
 10         /// </summary>
 11         /// <param name="locate">是否加载定位控件</param>
 12         /// <param name="markers">标点集合[{lng:'',lat:''}]</param>
 13         mapOptions: {},
 14         center: '北京',
 15         //是否监听标点的点击事件
 16         markerTap: false,
 17         //私有变量，定位按钮
 18         locate: null,
 19         //定位控件
 20         geo: null,
 21         //注意，填充数据需要在showMap事件触发之后才可以
 22         //store数据源lng,lat这两个字段必须有
 23         store: null,
 24         //data数据源
 25         data: null,
 26         //百度服务密钥,没有的话不会进行坐标转换，定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm
 27         ak: null
 28     },
 29     initialize: function () {
 30         this.callParent();
 31         this.on({
 32             //有些项目布局可能需要使用painted事件来监听
 33             show: 'initMap',
 34             scope: this
 35         });
 36     },
 37     //数据源事件
 38     storeEventHooks: {
 39         load: 'onLoad'
 40     },
 41     //填充数据
 42     updateData: function (data) {
 43         var me = this,
 44         store = me.getStore();
 45         if (!store) {
 46             this.setStore(Ext.create('Ext.data.Store', {
 47                 data: data,
 48                 autoDestroy: true
 49             }));
 50         } else {
 51             store.add(data);
 52         }
 53     },
 54     //创建store
 55     applyStore: function (store) {
 56         var me = this,
 57         bindEvents = Ext.apply({},
 58         me.storeEventHooks, {
 59             scope: me
 60         });
 61         //获取store,绑定事件
 62         if (store) {
 63             store = Ext.data.StoreManager.lookup(store);
 64             store.onAfter(bindEvents);
 65         }
 66         return store;
 67     },
 68     //更新store
 69     updateStore: function (newStore, oldStore) {
 70         var me = this,
 71         bindEvents = Ext.apply({},
 72         me.storeEventHooks, {
 73             scope: me
 74         });
 75         //移除绑定事件，销毁
 76         if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
 77             oldStore.un(bindEvents);
 78             if (oldStore.getAutoDestroy()) {
 79                 oldStore.destroy();
 80             }
 81         }
 82         if (newStore.getCount()) {
 83             me.on({
 84                 showMap: function () {
 85                     me.onLoad(newStore);
 86                 }
 87             });
 88         }
 89     },
 90     //数据加载成功,加载坐标点
 91     onLoad: function (store) {
 92         var me = this,
 93         map = me.getMap(),
 94         marker,
 95         item;
 96         map.clearOverlays();
 97 
 98         store.each(function (record, index, length) {
 99             item = record.getData();
100             if (item.lng && item.lat) {
101                 // 创建标注
102                 marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
103                 marker.options = {};
104                 for (var name in item) {
105                     if (name != 'lng' && name != 'lat') {
106                         marker.options[name] = item[name];
107                     }
108                 }
109                 if (me.getMarkerTap()) {
110                     //添加点击监听
111                     marker.addEventListener("click",
112                     function (type, target) {
113                         me.fireAction('tapMarker', [me, this], 'onTapMarker');
114                     });
115                 }
116                 // 将标注添加到地图中
117                 map.addOverlay(marker);
118             }
119         });
120     },
121     initMap: function () {
122         var me = this,
123         map = me.getMap();
124         if (!map) {
125             //初始化地图
126             var mapOptions = me.getMapOptions(),
127             map = new BMap.Map(me.getId()),
128             center = me.getCenter(),
129             point;
130             if (Ext.isString(center)) {
131                 point = center;
132             } else if (Ext.isObject(center)) {
133                 point = BMap.Point(center.lng, center.lat);
134             }
135 
136             //设置中心点和地图显示级别
137             map.centerAndZoom(point, 11);
138             ////添加地图缩放控件
139             map.addControl(new BMap.ZoomControl());
140             ////判断是否加载定位控件
141             if (mapOptions.locate) {
142                 map.addControl(me.getLocateControl());
143             }
144             me.setMap(map);
145             if (mapOptions.markers) {
146                 me.setData(mapOptions.markers);
147             }
148             //触发事件
149             me.fireEvent('showMap', me);
150 
151         }
152     },
153     getLocateControl: function () {
154         //创建控件
155         var locateControl = new BMap.Control();
156         //设置方位
157         locateControl.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
158         //设置坐标
159         locateControl.defaultOffset = new BMap.Size(10, 70);
160         //设置dom
161         locateControl.initialize = function (map) {
162             var zoom = document.createElement("div");
163             zoom.className = 'BMap_ZoomCtrl zoom_btn locateControl';
164             var location = document.createElement("div");
165             location.className = 'location';
166             zoom.appendChild(location);
167             map.getContainer().appendChild(zoom);
168             return zoom;
169         }
170         //监听点击事件
171         this.element.on({
172             tap: 'onLocate',
173             delegate: 'div.locateControl',
174             scope: this
175         });
176         return locateControl;
177     },
178     onLocate: function (e) {
179         var el = e.getTarget('div.location', null, true);
180         el.addCls('locationGif');
181         this.setLocate(el);
182         //触发定位事件
183         this.setGeo(true);
184     },
185     //创建定位插件
186     applyGeo: function (config) {
187         return Ext.factory(config, Ext.util.Geolocation, this.getGeo());
188     },
189     updateGeo: function (newGeo, oldGeo) {
190         var events = {
191             locationupdate: 'onGeoUpdate',
192             locationerror: 'onGeoError',
193             scope: this
194         };
195 
196         if (oldGeo) {
197             oldGeo.un(events);
198         }
199 
200         if (newGeo) {
201             newGeo.on(events);
202             newGeo.updateLocation();
203         }
204     },
205     // 定位成功，设置中心点
206     onGeoUpdate: function (geo) {
207         var me = this,
208         ak = me.getAk();
209         if (ak) {
210             Ext.Ajax.request({
211                 url: 'http://api.map.baidu.com/geoconv/v1/?',
212                 params: {
213                     coords: geo.getLongitude()+','+ geo.getLatitude(),
214                     ak: ak
215                 },
216                 scope: this,
217                 success: function (data) {
218                     data = Ext.decode(data.responseText).result[0];
219                     if (data) {
220                         me.addMyPoint(data.x, data.y);
221                     }
222                 }
223             });
224         } else {
225             me.addMyPoint(geo.getLongitude(), geo.getLatitude());
226         }
227     },
228     //添加我的坐标
229     addMyPoint: function (x,y) {
230         var me = this,
231             map = me.getMap(),
232            icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(20, 25), {
233                imageOffset: new BMap.Size(0, 0)
234            }),
235            point = new BMap.Point(x,y),
236            marker = new BMap.Marker(point, {
237                icon: icon
238            });
239         // 将标注添加到地图中
240         map.addOverlay(marker);
241         map.setCenter(point);
242         me.unLocate();
243     },
244     // 定位失败
245     onGeoError: function () {
246         this.unLocate();
247         //触发事件
248         this.fireEvent('geoError', this);
249     },
250     unLocate: function () {
251         var locate = this.getLocate();
252         if (locate) {
253             locate.removeCls('locationGif');
254         }
255     },
256     /// <summary>
257     /// 搜索
258     /// </summary>
259     /// <param name="key">关键词：String|Array<String></param>
260     /// <param name="unClear">是否不清除覆盖物</param>
261     search: function (key, unClear) {
262         var map = this.getMap(); !unClear && map.clearOverlays();
263         var local = new BMap.LocalSearch(map, {
264             renderOptions: {
265                 map: map,
266                 autoViewport: true
267             }
268         });
269         local.search(key);
270     },
271     /// <summary>
272     /// 根据中心点与检索词发起周边检索
273     /// </summary>
274     /// <param name="key">关键词：String|Array<String></param>
275     /// <param name="by">中心点：LocalResultPoi|String|Point</param>
276     /// <param name="unClear">是否不清除覆盖物</param>
277     searchNearby: function (key, by, unClear) {
278         var map = this.getMap(); !unClear && map.clearOverlays();
279         var local = new BMap.LocalSearch(map, {
280             renderOptions: {
281                 map: map,
282                 autoViewport: true
283             }
284         });
285         local.searchNearby(key, by);
286     },
287     /// <summary>
288     /// 设置地图中心
289     /// </summary>
290     /// <param name="point"></param>
291     setMapCenter: function (lng, lat) {
292         var map = this.getMap();
293         if (map) {
294             map.setCenter(new BMap.Point(lng, lat));
295         }
296     }
297 });

 

基本用法：

1.引入百度地图JavaScript 极速版

http://api.map.baidu.com/api?type=quick&ak=Y5wTAbhgC4EDVgaBnzCUYO9l&v=1.0

2.在视图中使用，用法类似官方谷歌地图控件

 1 Ext.define('app.view.Map', {
 2     alternateClassName: 'map',
 3     extend: 'ux.BMap',
 4     xtype: 'map',
 5     config: {
 6         title: '地图',
 7       8         /// <summary>
 9         /// 地图配置
10         /// </summary>
11         /// <param name="center">中心坐标点:{lng:'',lat:''}</param>
12         /// <param name="locate">是否加载定位控件</param>
13         /// <param name="markers">标点集合[{lng:'',lat:''}]</param>
14         mapOptions: {
15             locate: true,
16             markers: [{ lng: '116.404', lat: '39.915', options: '天安门' }, { lng: '116.1', lat: '39.915', options: '地安门' }]
17         },
18         //是否监听标点的点击事件
19         markerTap:true,
20         //私有变量，定位按钮
21         locate: null
22     }
23 });

效果图：

转载于:https://www.cnblogs.com/mlzs/p/3666466.html