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 });
效果图：
