sencha touch 百度地图扩展(2014-12-17)
2024-04-15 23:32:02
上个版本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 });效果图：
转载于:https://www.cnblogs.com/mlzs/p/4151504.html
sencha touch 百度地图扩展(2014-12-17)相关推荐
- sencha touch 百度地图扩展(2014-6-24)（废弃 仅参考）
扩展代码如下: 1 Ext.define('ux.BMap', { 2 alternateClassName: 'bMap', 3 extend: 'Ext.Container', 4 xtype: ...
- Extjs 百度地图扩展
支持 地址定位 ,标注,放大,缩小 今天上传不了效果图... var bmapps; Bsprint.EditMapInfoWindow = Ext.extend(Ext.Window, {form: ...
- 百度地图API 2014年 v3.0.0版本缩放控件、比例尺控件、指南针控件【控制方法】
// 隐藏缩放控件 int childCount = mMapView.getChildCount(); View zoom = null; for (int i = 0; i < childC ...
- 基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图 用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件 下载地址为:http://echarts.bai ...
- Vue+Echarts+百度地图 小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
- Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
- 用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
- 可视化篇：Echarts3.0引入百度地图（更新）
update: 由于目前echarts3.8.X比之前旧版改动较多,其实地图实例处许多朋友留言跑不通,今天更新下新版的做法,亲测已经可以. perface 一直抽不开身,留言区以及不少朋友都在问如何在 ...
- Echarts3.0引入百度地图-简单说
1. 首先是百度AK的申请 2. 下载bmap.js echarts.js bmap.js 是一个基于echart3的百度地图扩展文件,将其引入后可以在echarts.series.map.coord ...
最新文章
- Tomcat一些小事
- 江西理工大学期末试卷c语言,2016年江西理工大学信息工程学院计算机应用技术(加试)之C语言程序设计复试笔试最后押题五套卷...
- 第五篇：Spring Boot整合filter
- Diaspora-v1.3.0 素锦WordPress博客主
- 用 Gearman 分发 PHP 应用程序的工作负载(转载)
- Bootstrap+Font Awesome图标不显示 或显示错误解决办法
- Excel的设置 .net
- 其实你的领导也有中年危机
- 铝板展开插件_铝板行业排料Rhino插件
- 【网络技术题库整理5】网络安全技术
- 正确打开adams软件_Adams2017 64位证书安装图文教程
- retinaface代码讲解_Pytorch-RetinaFace 详解
- EPLAN史上最全部件库，部件宏，EDZ格式，大小合适导入容易 部件包含图片宏
- 大数据和小数据有什么区别？
- MTK开发入门基础教程
- 麻省理工学院公开课：计算机科学及编程导论 课堂笔记
- Demo示例——Bundle打包和加载
- 专访 PMC，开源项目 Apache Pulsar 如何挑战 Kafka？
- 【Quartz】任务调度
- keil MDK5.24打开MDK5.15及以前STM32工程报错Error #545:Required gpdsc file 'FrameworkCubeMX.gpdsc' is missing
热门文章
- STM8 I2C从机
- 1,515美元的价格可让您驾驭野兽式机械套装
- c++中x的y次方怎么求
- 【Tableau 图表大全27】之区域图(面积图)
- 安卓开发实战！一年后斩获腾讯T3，年薪超过80万！
- gdb调试 程序退出没有堆栈信息([Inferior 1 (process 12867) exited with code 0177])
- 从零开始学飞塔第一篇：飞塔防火墙基本上网配置（PPPoE拨号固定IP上网）FortiGate Broadband internet access
- 记使用腾讯TIM开发聊天通讯遇到的问题及解决方案
- ifft2 二维快速傅里叶逆变换（Matlab）
- LabVIEW编程LabVIEW开发 旧程序升级维护