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

扩展代码如下：

 Ext.define('ux.BMap', {
     alternateClassName: 'bMap',
     extend: 'Ext.Container',
     xtype: 'bMap',
     requires: ['Ext.util.Geolocation'],
     config: {
         map: null,
         /// <summary>
         /// 地图初始化配置
         /// </summary>
         /// <param name="locate">是否加载定位控件</param>
         /// <param name="markers">标点集合[{lng:'',lat:''}]</param>
         mapOptions: {},
         center: '北京',
         //是否监听标点的点击事件
         markerTap: false,
         //私有变量，定位按钮
         locate: null,
         //定位控件
         geo: null,
         //注意，填充数据需要在showMap事件触发之后才可以
         //store数据源lng,lat这两个字段必须有
         store: null,
         //data数据源
         data: null,
         //百度服务密钥,没有的话不会进行坐标转换，定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm
         ak: null
     },
     initialize: function () {
         this.callParent();
         this.on({
             //有些项目布局可能需要使用painted事件来监听
             show: 'initMap',
             scope: this
         });
     },
     //数据源事件
     storeEventHooks: {
         load: 'onLoad'
     },
     //填充数据
     updateData: function (data) {
         var me = this,
         store = me.getStore();
         if (!store) {
             this.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,
         bindEvents = Ext.apply({},
         me.storeEventHooks, {
             scope: me
         });
         //移除绑定事件，销毁
         if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
             oldStore.un(bindEvents);
             if (oldStore.getAutoDestroy()) {
                 oldStore.destroy();
             }
         }
         if (newStore.getCount()) {
             me.on({
                 showMap: function () {
                     me.onLoad(newStore);
                 }
             });
         }
     },
     //数据加载成功,加载坐标点
     onLoad: function (store) {
         var me = this,
         map = me.getMap(),
         marker,
         item;
         map.clearOverlays();

         store.each(function (record, index, length) {
             item = record.getData();
             if (item.lng && item.lat) {
                 // 创建标注
                 marker = new BMap.Marker(new BMap.Point(item.lng, item.lat));
                 marker.options = {};
                 for (var name in item) {
                     if (name != 'lng' && name != 'lat') {
                         marker.options[name] = item[name];
                     }
                 }
                 if (me.getMarkerTap()) {
                     //添加点击监听
                     marker.addEventListener("click",
                     function (type, target) {
                         me.fireAction('tapMarker', [me, this], 'onTapMarker');
                     });
                 }
                 // 将标注添加到地图中
                 map.addOverlay(marker);
             }
         });
     },
     initMap: function () {
         var me = this,
         map = me.getMap();
         if (!map) {
             //初始化地图
             var mapOptions = me.getMapOptions(),
             map = new BMap.Map(me.getId()),
             center = me.getCenter(),
             point;
             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 (mapOptions.markers) {
                 me.setData(mapOptions.markers);
             }
             //触发事件
             me.fireEvent('showMap', me);

         }
     },
     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: this,
                 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 (x,y) {
         var me = this,
             map = me.getMap(),
            icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(20, 25), {
                imageOffset: new BMap.Size(0, 0)
            }),
            point = new BMap.Point(x,y),
            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');
         }
     },
     /// <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.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));
         }
     }
 });

基本用法：

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="center">中心坐标点:{lng:'',lat:''}</param>
         /// <param name="locate">是否加载定位控件</param>
         /// <param name="markers">标点集合[{lng:'',lat:''}]</param>
         mapOptions: {
             locate: true,
             markers: [{ lng: '116.404', lat: '39.915', options: '天安门' }, { lng: '116.1', lat: '39.915', options: '地安门' }]
         },
         //是否监听标点的点击事件
         markerTap:true,
         //私有变量，定位按钮
         locate: null
     }
 });

效果图：