首页 > 代码库 > sencha touch百度地图扩展
sencha touch百度地图扩展
扩展代码如下:
Ext.define(‘ux.BMap‘, { alternateClassName: ‘bMap‘, extend: ‘Ext.Container‘, xtype: ‘bMap‘, requires: [‘Ext.util.Geolocation‘], config: { //私有变量,地图对象 map: null, /// <summary> /// 地图初始化配置 /// </summary> /// <param name="locate">是否加载定位控件</param> mapOptions: {}, //初始配置 //中心点,可以是城市名称,也可以是{lng:‘‘,lat:‘‘}格式的坐标数据 center: ‘北京‘, //是否监听标点的点击事件 markerTap: false, //私有变量,定位按钮 locate: null, //私有变量,定位控件 geo: null, //注意,填充数据需要在showMap事件触发之后才可以 //store数据源lng,lat这两个字段必须有 store: null, //data数据源,格式为[{lng:‘‘,lat:‘‘}] data: null, //百度服务密钥,没有的话不会进行坐标转换,定位会有一定的误差参考http://developer.baidu.com/map/changeposition.htm ak: null, //lng坐标name lngName: ‘lng‘, //lat坐标name latName: ‘lat‘, //本地搜素关键词 key: null, //根据地址直接解析坐标,可以是单个地址,也可以是[{address:‘地址‘}]数组,可以有其他参数 address: null }, //初始化 initialize: function () { var me = this; me.callParent(); //视图绘制完成后再加载百度地图,以免地图加载出错 me.on({ painted: ‘initMap‘, scope: me }); }, //初始化地图 initMap: function () { var me = this, map = me.getMap(); if (!map) { //初始化地图 //获取地图初始化配置 var mapOptions = me.getMapOptions(), //获取中心点 center = me.getCenter(), //获取搜索key key = me.getKey(), //获取地址 address = me.getAddress(), //获取数据源 store=me.getStore(), point; //创建地图 map = new BMap.Map(me.element.dom); //获取中心点 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 (key) { me.search(key); } //地址解析 if (address) { me.setMarkerbyAddress(address); } //加载store if (store&&store.getCount()) { me.onLoad(store); } //地图加载完毕触发事件 me.fireEvent(‘showMap‘, me); } }, //数据源事件 storeEventHooks: { load: ‘onLoad‘ }, //填充数据 updateData: function (data) { var me = this, store = me.getStore(); if (!store) { me.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, map = me.getMap(), bindEvents = Ext.apply({}, me.storeEventHooks, { scope: me }); //移除绑定事件,销毁 if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) { oldStore.un(bindEvents); if (oldStore.getAutoDestroy()) { oldStore.destroy(); } } if (map && newStore.getCount()) { me.onLoad(newStore); } }, //数据加载成功,加载坐标点 onl oad: function (store) { var me = this, map = me.getMap(), lngName = me.getLngName(), latName = me.getLatName(), marker, item; map.clearOverlays(); store.each(function (record, index, length) { item = record.getData(); me.addPoint(item[lngName], item[latName], item, me, map); }); }, //添加单个点 addPoint: function (lng, lat, item,me, map) { if (!me) { me = this; } if (!map) { map = me.getMap(); } if (lng && lat) { // 创建标注 var marker = new BMap.Marker(new BMap.Point(lng, lat)); //其他数据 marker.options = {}; //将模型中的其他数据添加到按钮中 for (var name in item) { marker.options[name] = item[name]; } if (me.getMarkerTap()) { //添加点击监听 marker.addEventListener("click", function (type, target) { me.fireAction(‘tapMarker‘, [me, this], ‘onTapMarker‘); }); } // 将标注添加到地图中 map.addOverlay(marker); } }, //获取定位控件 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: me, success: function (data) { data = http://www.mamicode.com/Ext.decode(data.responseText).result[0];"resources/icons/markers.png", new BMap.Size(25, 25), { imageOffset: new BMap.Size(0, 0) }), point = new BMap.Point(lng, lat), 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‘); } }, //更新搜索关键词 updateKey: function (value) { var me = this, map = me.getMap(); if (map && value) { me.search(value); } }, /// <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.setSearchCompleteCallback(function (bo) { console.log(bo); if (bo._currentNumPois == 0) { Ext.toast(‘请输入正确的检索条件!‘); } }); 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)); } }, //更新地址 setMarkerbyAddress: function (address) { var me = this; if (address) { if (Ext.isArray(address)) { for (var i = 0; i < address.length; i++) { me.getMarkerbyAddress(address[i].address, address[i]); } } else if (Ext.isString(address)) { me.getMarkerbyAddress(address); } } }, //根据地址解析坐标 getMarkerbyAddress: function (address, params) { var me = this, ak = me.getAk(); if (ak) { Ext.Ajax.request({ url: ‘http://api.map.baidu.com/geocoder/v2/?‘, myParams: params, params: { address: address, ak: ak, output: ‘json‘ }, scope: me, success: function (data) { var response = Ext.decode(data.responseText), location; if (response.status == 0) { location = response.result.location; me.addPoint(location.lng, location.lat,data.request.options.myParams); } else { if (!params) { Ext.toast(‘请输入正确的检索条件!‘); } } } }); } else { Ext.Logger.error(‘请设置百度服务ak!‘); } }});
基本用法:
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="locate">是否加载定位控件</param> mapOptions: { locate: true }, data: [{ lng: ‘116.404‘, lat: ‘39.915‘, name: ‘天安门‘ }, { lng: ‘116.1‘, lat: ‘39.915‘, name: ‘地安门‘ }], //是否监听标点的点击事件 markerTap: true }, //点击坐标处理 onTapMarker: function (me, marker) { //创建信息窗口 var infoWindow = new BMap.InfoWindow(marker.options.name); marker.openInfoWindow(infoWindow); }});
效果图:
sencha touch百度地图扩展
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。