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 });
效果图:
转载于:https://www.cnblogs.com/mlzs/p/3666466.html
sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)相关推荐
- sencha touch 百度地图扩展(2014-12-17)
上个版本http://www.cnblogs.com/mlzs/p/3666466.html,新增了一些功能,修复了一些bug 扩展代码如下: 1 Ext.define('ux.BMap', { 2 ...
- echarts 中使用百度地图 bmap (基础使用:仅显示、定义样式)
1. 实现功能 实现简单的自定义样式百度地图,仅显示(基础,可自己研究扩展) 效果: 2. 代码步骤 第一步:创建基础结构,id="map" 的 div 做 echarts 容器 ...
- 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 ...
- 用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
- navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...
- 百度地图这十年如何一步步干掉了强悍的对手?
前几天在使用电子导航时我问朋友:在没有电子地图时,人们开车出行时是怎么认路的?朋友说:大概十年前城市道路没这么复杂吧,或者随身携带一份纸质地图?这样的黑暗时代并不遥远,十年前在网络地图普及之前,人们出 ...
最新文章
- Python,OpenCV基于支持向量机SVM的手写数字OCR
- 关于MYSQL日期 字符串 时间戳互转
- Linux安装/卸载软件教程
- JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
- 如何检查python的库是否安装成功_如何测试redis是否安装成功
- 用于指纹验证的C#框架
- 在集合点的同步 CyclicBarrier
- 黑客+马拉松=? 黑客马拉松?
- 企业舆情监测的意义是什么?为什么要做舆情监测?
- Android端,如何实现Youtube or YouTube music后台或锁屏状态下,播放音乐和视频
- 第三部分 数据结构 -- 第二章 队列-1362:家庭问题(family)
- 二维正态分布参数rho的作用
- 这15个PDF转化工具
- 如何用Python画一个简单的笑脸
- PJSIP 下载和编译
- 快速开始keras 教程
- HTML+CSS 绘制太阳系各个行星运行轨迹
- 电磁波极化原理及仿真
- 全面分析前端的网络请求方式
- python选课管理系统_Python开发程序:选课系统
热门文章
- 王道计算机组成原理课代表 - 考研计算机 第四章 指令系统 究极精华总结笔记
- 极案例 | 守护地铁运营“生命线”,极视角与深圳地铁运管办共建“AI智能巡检系统”
- 细读HTTPS -- SSL/TLS历史,密码学
- Rose Blumki
- 完美融入云原生的无代码平台 iVX编辑器实战
- ps中如何批量修改图片
- 如何用安装启动盘启动计算机,U大师U盘启动盘制作教程 详细图解步骤教你怎么装系统(老机版)...
- 微信小程序开发之获取用户信息
- [坑]微信支付首次支付成功,第二次调用失败
- 计算机弹出虚拟U盘,怎么设置vmware虚拟机U盘启动