首页 > 代码库 > 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百度地图扩展