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     onl oad: 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         //设置dom176         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: this190         });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: this209         };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: ak230                 },231                 scope: this,232                 success: function (data) {233                     data = http://www.mamicode.com/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: icon253            });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: true283             }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: true305             }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 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: null21     }22 });