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

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

扩展代码如下：

  1 Ext.define('ux.BMap', {

  2     alternateClassName: 'bMap',

  3     extend: 'Ext.Container',

  4     xtype: 'bMap',

  5     requires: ['Ext.util.Geolocation'],

  6     config: {

  7         //私有变量，地图对象

  8         map: null,

  9         /// <summary>

 10         /// 地图初始化配置

 11         /// </summary>

 12         /// <param name="locate">是否加载定位控件</param>

 13         mapOptions: {},

 14         //初始配置

 15         //中心点，可以是城市名称，也可以是{lng:'',lat:''}格式的坐标数据

 16         center: '北京',

 17         //是否监听标点的点击事件

 18         markerTap: false,

 19         //私有变量，定位按钮

 20         locate: null,

 21         //私有变量，定位控件

 22         geo: null,

 23         //注意，填充数据需要在showMap事件触发之后才可以

 24         //store数据源lng,lat这两个字段必须有

 25         store: null,

 26         //data数据源，格式为[{lng:'',lat:''}]

 27         data: null,

 28         //百度服务密钥,没有的话不会进行坐标转换，定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm

 29         ak: null,

 30         //lng坐标name

 31         lngName: 'lng',

 32         //lat坐标name

 33         latName: 'lat',

 34         //本地搜素关键词

 35         key: null,

 36         //根据地址直接解析坐标，可以是单个地址，也可以是[{address:'地址'}]数组，可以有其他参数

 37         address: null

 38     },

 39     //初始化

 40     initialize: function () {

 41         var me = this;

 42         me.callParent();

 43         //视图绘制完成后再加载百度地图，以免地图加载出错

 44         me.on({

 45             painted: 'initMap',

 46             scope: me

 47         });

 48     },

 49     //初始化地图

 50     initMap: function () {

 51         var me = this,

 52         map = me.getMap();

 53         if (!map) {

 54             //初始化地图

 55             //获取地图初始化配置

 56             var mapOptions = me.getMapOptions(),

 57             //获取中心点

 58             center = me.getCenter(),

 59             //获取搜索key

 60             key = me.getKey(),

 61             //获取地址

 62             address = me.getAddress(),

 63             //获取数据源

 64             store=me.getStore(),

 65             point;

 66             //创建地图

 67             map = new BMap.Map(me.element.dom);

 68             //获取中心点

 69             if (Ext.isString(center)) {

 70                 point = center;

 71             } else if (Ext.isObject(center)) {

 72                 point = BMap.Point(center.lng, center.lat);

 73             }

 74             //设置中心点和地图显示级别

 75             map.centerAndZoom(point, 11);

 76             //添加地图缩放控件

 77             map.addControl(new BMap.ZoomControl());

 78             //判断是否加载定位控件

 79             if (mapOptions.locate) {

 80                 //加载定位控件

 81                 map.addControl(me.getLocateControl());

 82             }

 83             //设置地图对象，方便在其他地方获取到地图对象

 84             me.setMap(map);

 85             //关键词搜索

 86             if (key) {

 87                 me.search(key);

 88             }

 89             //地址解析

 90             if (address) {

 91                 me.setMarkerbyAddress(address);

 92             }

 93             //加载store

 94             if (store&&store.getCount()) {

 95                 me.onLoad(store);

 96             }

 97             

 98             //地图加载完毕触发事件

 99             me.fireEvent('showMap', me);

100         }

101     },

102     //数据源事件

103     storeEventHooks: {

104         load: 'onLoad'

105     },

106     //填充数据

107     updateData: function (data) {

108         var me = this,

109         store = me.getStore();

110         if (!store) {

111             me.setStore(Ext.create('Ext.data.Store', {

112                 data: data,

113                 autoDestroy: true

114             }));

115         } else {

116             store.add(data);

117         }

118     },

119     //创建store

120     applyStore: function (store) {

121         var me = this,

122         bindEvents = Ext.apply({},

123         me.storeEventHooks, {

124             scope: me

125         });

126         //获取store,绑定事件

127         if (store) {

128             store = Ext.data.StoreManager.lookup(store);

129             store.onAfter(bindEvents);

130         }

131         return store;

132     },

133     //更新store

134     updateStore: function (newStore, oldStore) {

135         var me = this,

136         map = me.getMap(),

137         bindEvents = Ext.apply({},

138         me.storeEventHooks, {

139             scope: me

140         });

141         //移除绑定事件，销毁

142         if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {

143             oldStore.un(bindEvents);

144             if (oldStore.getAutoDestroy()) {

145                 oldStore.destroy();

146             }

147         }

148         if (map && newStore.getCount()) {

149             me.onLoad(newStore);

150         }

151     },

152     //数据加载成功,加载坐标点

153     onLoad: function (store) {

154         var me = this,

155         map = me.getMap(),

156         lngName = me.getLngName(),

157         latName = me.getLatName(),

158         marker,

159         item;

160         map.clearOverlays();

161         store.each(function (record, index, length) {

162             item = record.getData();

163             me.addPoint(item[lngName], item[latName], item, me, map);

164         });

165     },

166     //添加单个点

167     addPoint: function (lng, lat, item,me, map) {

168         if (!me) {

169             me = this;

170         }

171         if (!map) {

172             map = me.getMap();

173         }

174         if (lng && lat) {

175             // 创建标注

176             var  marker = new BMap.Marker(new BMap.Point(lng, lat));

177             //其他数据

178             marker.options = {};

179             //将模型中的其他数据添加到按钮中

180             for (var name in item) {

181                 marker.options[name] = item[name];

182             }

183             if (me.getMarkerTap()) {

184                 //添加点击监听

185                 marker.addEventListener("click",

186                 function (type, target) {

187                     me.fireAction('tapMarker', [me, this], 'onTapMarker');

188                 });

189             }

190             // 将标注添加到地图中

191             map.addOverlay(marker);

192         }

193     },

194     //获取定位控件

195     getLocateControl: function () {

196         //创建控件

197         var locateControl = new BMap.Control();

198         //设置方位

199         locateControl.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;

200         //设置坐标

201         locateControl.defaultOffset = new BMap.Size(10, 70);

202         //设置dom

203         locateControl.initialize = function (map) {

204             var zoom = document.createElement("div");

205             zoom.className = 'BMap_ZoomCtrl zoom_btn locateControl';

206             var location = document.createElement("div");

207             location.className = 'location';

208             zoom.appendChild(location);

209             map.getContainer().appendChild(zoom);

210             return zoom;

211         }

212         //监听点击事件

213         this.element.on({

214             tap: 'onLocate',

215             delegate: 'div.locateControl',

216             scope: this

217         });

218         return locateControl;

219     },

220     //点击定位按钮

221     onLocate: function (e) {

222         var el = e.getTarget('div.location', null, true);

223         el.addCls('locationGif');

224         this.setLocate(el);

225         //触发定位事件

226         this.setGeo(true);

227     },

228     //创建定位插件

229     applyGeo: function (config) {

230         return Ext.factory(config, Ext.util.Geolocation, this.getGeo());

231     },

232     //更新定位插件

233     updateGeo: function (newGeo, oldGeo) {

234         var events = {

235             locationupdate: 'onGeoUpdate',

236             locationerror: 'onGeoError',

237             scope: this

238         };

239 

240         if (oldGeo) {

241             oldGeo.un(events);

242         }

243 

244         if (newGeo) {

245             newGeo.on(events);

246             newGeo.updateLocation();

247         }

248     },

249     // 定位成功，设置中心点

250     onGeoUpdate: function (geo) {

251         var me = this,

252         ak = me.getAk();

253         if (ak) {

254             Ext.Ajax.request({

255                 url: 'http://api.map.baidu.com/geoconv/v1/?',

256                 params: {

257                     coords: geo.getLongitude() + ',' + geo.getLatitude(),

258                     ak: ak

259                 },

260                 scope: me,

261                 success: function (data) {

262                     data = Ext.decode(data.responseText).result[0];

263                     if (data) {

264                         me.addMyPoint(data.x, data.y);

265                     }

266                 }

267             });

268         } else {

269             me.addMyPoint(geo.getLongitude(), geo.getLatitude());

270         }

271     },

272     //添加我的坐标

273     addMyPoint: function (lng, lat) {

274         var me = this,

275         map = me.getMap(),

276         icon = new BMap.Icon("resources/icons/markers.png", new BMap.Size(25, 25), {

277             imageOffset: new BMap.Size(0, 0)

278         }),

279         point = new BMap.Point(lng, lat),

280         marker = new BMap.Marker(point, {

281             icon: icon

282         });

283         // 将标注添加到地图中

284         map.addOverlay(marker);

285         map.setCenter(point);

286         me.unLocate();

287     },

288     // 定位失败

289     onGeoError: function () {

290         this.unLocate();

291         //触发事件

292         this.fireEvent('geoError', this);

293     },

294     //取消定位动画

295     unLocate: function () {

296         var locate = this.getLocate();

297         if (locate) {

298             locate.removeCls('locationGif');

299         }

300     },

301     //更新搜索关键词

302     updateKey: function (value) {

303         var me = this,

304         map = me.getMap();

305         if (map && value) {

306             me.search(value);

307         }

308     },

309     /// <summary>

310     /// 搜索

311     /// </summary>

312     /// <param name="key">关键词：String|Array<String></param>

313     /// <param name="unClear">是否不清除覆盖物</param>

314     search: function (key, unClear) {

315         var map = this.getMap(); !unClear && map.clearOverlays();

316         var local = new BMap.LocalSearch(map, {

317             renderOptions: {

318                 map: map,

319                 autoViewport: true

320             }

321         });

322         local.setSearchCompleteCallback(function (bo) {

323             console.log(bo);

324             if (bo._currentNumPois == 0) {

325                 Ext.toast('请输入正确的检索条件！');

326             }

327         });

328         local.search(key);

329     },

330     /// <summary>

331     /// 根据中心点与检索词发起周边检索

332     /// </summary>

333     /// <param name="key">关键词：String|Array<String></param>

334     /// <param name="by">中心点：LocalResultPoi|String|Point</param>

335     /// <param name="unClear">是否不清除覆盖物</param>

336     searchNearby: function (key, by, unClear) {

337         var map = this.getMap(); !unClear && map.clearOverlays();

338         var local = new BMap.LocalSearch(map, {

339             renderOptions: {

340                 map: map,

341                 autoViewport: true

342             }

343         });

344         local.searchNearby(key, by);

345     },

346     /// <summary>

347     /// 设置地图中心

348     /// </summary>

349     /// <param name="point"></param>

350     setMapCenter: function (lng, lat) {

351         var map = this.getMap();

352         if (map) {

353             map.setCenter(new BMap.Point(lng, lat));

354         }

355     },

356     //更新地址

357     setMarkerbyAddress: function (address) {

358         var me = this;

359         if (address) {

360             if (Ext.isArray(address)) {

361                 for (var i = 0; i < address.length; i++) {

362                     me.getMarkerbyAddress(address[i].address, address[i]);

363                 }

364             } else if (Ext.isString(address)) {

365                 me.getMarkerbyAddress(address);

366             }

367         }

368     },

369     //根据地址解析坐标

370     getMarkerbyAddress: function (address, params) {

371         var me = this,

372         ak = me.getAk();

373         if (ak) {

374             Ext.Ajax.request({

375                 url: 'http://api.map.baidu.com/geocoder/v2/?',

376                 myParams: params,

377                 params: {

378                     address: address,

379                     ak: ak,

380                     output: 'json'

381                 },

382                 scope: me,

383                 success: function (data) {

384                     var response = Ext.decode(data.responseText),

385                     location;

386                     if (response.status == 0) {

387                         location = response.result.location;

388                         me.addPoint(location.lng, location.lat,data.request.options.myParams);

389                     } else {

390                         if (!params) {

391                             Ext.toast('请输入正确的检索条件！');

392                         }

393                     }

394                 }

395             });

396         } else {

397             Ext.Logger.error('请设置百度服务ak！');

398         }

399     }

400 });

 

基本用法：

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         /// <summary>

 8         /// 地图配置

 9         /// </summary>

10         /// <param name="locate">是否加载定位控件</param>

11         mapOptions: {

12             locate: true

13         },

14         data: [{ lng: '116.404', lat: '39.915', name: '天安门' }, { lng: '116.1', lat: '39.915', name: '地安门' }],

15         //是否监听标点的点击事件

16         markerTap: true

17     },

18     //点击坐标处理

19     onTapMarker: function (me, marker) {

20         //创建信息窗口

21         var infoWindow = new BMap.InfoWindow(marker.options.name);

22         marker.openInfoWindow(infoWindow);

23     }

24 });

 

效果图：