sencha touch 百度地图扩展

上个版本http://www.cnblogs.com/mlzs/p/3666466.html，新增了一些功能

扩展代码如下：

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

基本用法：

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>
 8         /// 地图配置
 9         /// </summary>
10         /// <param name="center">中心坐标点:{lng:‘‘,lat:‘‘}</param>
11         /// <param name="locate">是否加载定位控件</param>
12         /// <param name="markers">标点集合[{lng:‘‘,lat:‘‘}]</param>
13         mapOptions: {
14             locate: true,
15             markers: [{ lng: ‘116.404‘, lat: ‘39.915‘, options: ‘天安门‘ }, { lng: ‘116.1‘, lat: ‘39.915‘, options: ‘地安门‘ }]
16         },
17         //是否监听标点的点击事件
18         markerTap:true,
19         //私有变量，定位按钮
20         locate: null
21     }
22 });

效果图：