sencha touch 百度地图扩展(2014-12-17)

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

扩展代码如下：

 Ext.define('ux.BMap', {
     alternateClassName: 'bMap',
     extend: 'Ext.Container',
     xtype: 'bMap',
     requires: ['Ext.util.Geolocation'],
     config: {
         //私有变量，地图对象
         map: null,
         /// <summary>
         /// 地图初始化配置
         /// </summary>
         /// <param name="locate">是否加载定位控件</param>
         mapOptions: {},
         //初始配置
         //中心点，可以是城市名称，也可以是{lng:'',lat:''}格式的坐标数据
         center: '北京',
         //是否监听标点的点击事件
         markerTap: false,
         //私有变量，定位按钮
         locate: null,
         //私有变量，定位控件
         geo: null,
         //注意，填充数据需要在showMap事件触发之后才可以
         //store数据源lng,lat这两个字段必须有
         store: null,
         //data数据源，格式为[{lng:'',lat:''}]
         data: null,
         //百度服务密钥,没有的话不会进行坐标转换，定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm
         ak: null,
         //lng坐标name
         lngName: 'lng',
         //lat坐标name
         latName: 'lat',
         //本地搜素关键词
         key: null,
         //根据地址直接解析坐标，可以是单个地址，也可以是[{address:'地址'}]数组，可以有其他参数
         address: null
     },
     //初始化
     initialize: function () {
         var me = this;
         me.callParent();
         //视图绘制完成后再加载百度地图，以免地图加载出错
         me.on({
             painted: 'initMap',
             scope: me
         });
     },
     //初始化地图
     initMap: function () {
         var me = this,
         map = me.getMap();
         if (!map) {
             //初始化地图
             //获取地图初始化配置
             var mapOptions = me.getMapOptions(),
             //获取中心点
             center = me.getCenter(),
             //获取搜索key
             key = me.getKey(),
             //获取地址
             address = me.getAddress(),
             //获取数据源
             store=me.getStore(),
             point;
             //创建地图
             map = new BMap.Map(me.element.dom);
             //获取中心点
             if (Ext.isString(center)) {
                 point = center;
             } else if (Ext.isObject(center)) {
                 point = BMap.Point(center.lng, center.lat);
             }
             //设置中心点和地图显示级别
             map.centerAndZoom(point, 11);
             //添加地图缩放控件
             map.addControl(new BMap.ZoomControl());
             //判断是否加载定位控件
             if (mapOptions.locate) {
                 //加载定位控件
                 map.addControl(me.getLocateControl());
             }
             //设置地图对象，方便在其他地方获取到地图对象
             me.setMap(map);
             //关键词搜索
             if (key) {
                 me.search(key);
             }
             //地址解析
             if (address) {
                 me.setMarkerbyAddress(address);
             }
             //加载store
             if (store&&store.getCount()) {
                 me.onLoad(store);
             }

             //地图加载完毕触发事件
             me.fireEvent('showMap', me);
         }
     },
     //数据源事件
     storeEventHooks: {
         load: 'onLoad'
     },
     //填充数据
     updateData: function (data) {
         var me = this,
         store = me.getStore();
         if (!store) {
             me.setStore(Ext.create('Ext.data.Store', {
                 data: data,
                 autoDestroy: true
             }));
         } else {
             store.add(data);
         }
     },
     //创建store
     applyStore: function (store) {
         var me = this,
         bindEvents = Ext.apply({},
         me.storeEventHooks, {
             scope: me
         });
         //获取store,绑定事件
         if (store) {
             store = Ext.data.StoreManager.lookup(store);
             store.onAfter(bindEvents);
         }
         return store;
     },
     //更新store
     updateStore: function (newStore, oldStore) {
         var me = this,
         map = me.getMap(),
         bindEvents = Ext.apply({},
         me.storeEventHooks, {
             scope: me
         });
         //移除绑定事件，销毁
         if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
             oldStore.un(bindEvents);
             if (oldStore.getAutoDestroy()) {
                 oldStore.destroy();
             }
         }
         if (map && newStore.getCount()) {
             me.onLoad(newStore);
         }
     },
     //数据加载成功,加载坐标点
     onLoad: function (store) {
         var me = this,
         map = me.getMap(),
         lngName = me.getLngName(),
         latName = me.getLatName(),
         marker,
         item;
         map.clearOverlays();
         store.each(function (record, index, length) {
             item = record.getData();
             me.addPoint(item[lngName], item[latName], item, me, map);
         });
     },
     //添加单个点
     addPoint: function (lng, lat, item,me, map) {
         if (!me) {
             me = this;
         }
         if (!map) {
             map = me.getMap();
         }
         if (lng && lat) {
             // 创建标注
             var  marker = new BMap.Marker(new BMap.Point(lng, lat));
             //其他数据
             marker.options = {};
             //将模型中的其他数据添加到按钮中
             for (var name in item) {
                 marker.options[name] = item[name];
             }
             if (me.getMarkerTap()) {
                 //添加点击监听
                 marker.addEventListener("click",
                 function (type, target) {
                     me.fireAction('tapMarker', [me, this], 'onTapMarker');
                 });
             }
             // 将标注添加到地图中
             map.addOverlay(marker);
         }
     },
     //获取定位控件
     getLocateControl: function () {
         //创建控件
         var locateControl = new BMap.Control();
         //设置方位
         locateControl.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
         //设置坐标
         locateControl.defaultOffset = new BMap.Size(10, 70);
         //设置dom
         locateControl.initialize = function (map) {
             var zoom = document.createElement("div");
             zoom.className = 'BMap_ZoomCtrl zoom_btn locateControl';
             var location = document.createElement("div");
             location.className = 'location';
             zoom.appendChild(location);
             map.getContainer().appendChild(zoom);
             return zoom;
         }
         //监听点击事件
         this.element.on({
             tap: 'onLocate',
             delegate: 'div.locateControl',
             scope: this
         });
         return locateControl;
     },
     //点击定位按钮
     onLocate: function (e) {
         var el = e.getTarget('div.location', null, true);
         el.addCls('locationGif');
         this.setLocate(el);
         //触发定位事件
         this.setGeo(true);
     },
     //创建定位插件
     applyGeo: function (config) {
         return Ext.factory(config, Ext.util.Geolocation, this.getGeo());
     },
     //更新定位插件
     updateGeo: function (newGeo, oldGeo) {
         var events = {
             locationupdate: 'onGeoUpdate',
             locationerror: 'onGeoError',
             scope: this
         };

         if (oldGeo) {
             oldGeo.un(events);
         }

         if (newGeo) {
             newGeo.on(events);
             newGeo.updateLocation();
         }
     },
     // 定位成功，设置中心点
     onGeoUpdate: function (geo) {
         var me = this,
         ak = me.getAk();
         if (ak) {
             Ext.Ajax.request({
                 url: 'http://api.map.baidu.com/geoconv/v1/?',
                 params: {
                     coords: geo.getLongitude() + ',' + geo.getLatitude(),
                     ak: ak
                 },
                 scope: me,
                 success: function (data) {
                     data = Ext.decode(data.responseText).result[0];
                     if (data) {
                         me.addMyPoint(data.x, data.y);
                     }
                 }
             });
         } else {
             me.addMyPoint(geo.getLongitude(), geo.getLatitude());
         }
     },
     //添加我的坐标
     addMyPoint: function (lng, lat) {
         var me = this,
         map = me.getMap(),
         icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(25, 25), {
             imageOffset: new BMap.Size(0, 0)
         }),
         point = new BMap.Point(lng, lat),
         marker = new BMap.Marker(point, {
             icon: icon
         });
         // 将标注添加到地图中
         map.addOverlay(marker);
         map.setCenter(point);
         me.unLocate();
     },
     // 定位失败
     onGeoError: function () {
         this.unLocate();
         //触发事件
         this.fireEvent('geoError', this);
     },
     //取消定位动画
     unLocate: function () {
         var locate = this.getLocate();
         if (locate) {
             locate.removeCls('locationGif');
         }
     },
     //更新搜索关键词
     updateKey: function (value) {
         var me = this,
         map = me.getMap();
         if (map && value) {
             me.search(value);
         }
     },
     /// <summary>
     /// 搜索
     /// </summary>
     /// <param name="key">关键词：String|Array<String></param>
     /// <param name="unClear">是否不清除覆盖物</param>
     search: function (key, unClear) {
         var map = this.getMap(); !unClear && map.clearOverlays();
         var local = new BMap.LocalSearch(map, {
             renderOptions: {
                 map: map,
                 autoViewport: true
             }
         });
         local.setSearchCompleteCallback(function (bo) {
             console.log(bo);
             if (bo._currentNumPois == 0) {
                 Ext.toast('请输入正确的检索条件！');
             }
         });
         local.search(key);
     },
     /// <summary>
     /// 根据中心点与检索词发起周边检索
     /// </summary>
     /// <param name="key">关键词：String|Array<String></param>
     /// <param name="by">中心点：LocalResultPoi|String|Point</param>
     /// <param name="unClear">是否不清除覆盖物</param>
     searchNearby: function (key, by, unClear) {
         var map = this.getMap(); !unClear && map.clearOverlays();
         var local = new BMap.LocalSearch(map, {
             renderOptions: {
                 map: map,
                 autoViewport: true
             }
         });
         local.searchNearby(key, by);
     },
     /// <summary>
     /// 设置地图中心
     /// </summary>
     /// <param name="point"></param>
     setMapCenter: function (lng, lat) {
         var map = this.getMap();
         if (map) {
             map.setCenter(new BMap.Point(lng, lat));
         }
     },
     //更新地址
     setMarkerbyAddress: function (address) {
         var me = this;
         if (address) {
             if (Ext.isArray(address)) {
                 for (var i = 0; i < address.length; i++) {
                     me.getMarkerbyAddress(address[i].address, address[i]);
                 }
             } else if (Ext.isString(address)) {
                 me.getMarkerbyAddress(address);
             }
         }
     },
     //根据地址解析坐标
     getMarkerbyAddress: function (address, params) {
         var me = this,
         ak = me.getAk();
         if (ak) {
             Ext.Ajax.request({
                 url: 'http://api.map.baidu.com/geocoder/v2/?',
                 myParams: params,
                 params: {
                     address: address,
                     ak: ak,
                     output: 'json'
                 },
                 scope: me,
                 success: function (data) {
                     var response = Ext.decode(data.responseText),
                     location;
                     if (response.status == 0) {
                         location = response.result.location;
                         me.addPoint(location.lng, location.lat,data.request.options.myParams);
                     } else {
                         if (!params) {
                             Ext.toast('请输入正确的检索条件！');
                         }
                     }
                 }
             });
         } else {
             Ext.Logger.error('请设置百度服务ak！');
         }
     }
 });

基本用法：

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

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

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

 Ext.define('app.view.Map', {
     alternateClassName: 'map',
     extend: 'ux.BMap',
     xtype: 'map',
     config: {
         title: '地图',
         /// <summary>
         /// 地图配置
         /// </summary>
         /// <param name="locate">是否加载定位控件</param>
         mapOptions: {
             locate: true
         },
         data: [{ lng: '116.404', lat: '39.915', name: '天安门' }, { lng: '116.1', lat: '39.915', name: '地安门' }],
         //是否监听标点的点击事件
         markerTap: true
     },
     //点击坐标处理
     onTapMarker: function (me, marker) {
         //创建信息窗口
         var infoWindow = new BMap.InfoWindow(marker.options.name);
         marker.openInfoWindow(infoWindow);
     }
 });

效果图：