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);
        }
    },
    //数据加载成功,加载坐标点
    onLoad: 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 = Ext.decode(data.responseText).result[0];
                    if (data) {
                        me.addMyPoint(data.x, data.y);
                    }
                }
            });
        } else {
            me.addMyPoint(geo.getLongitude(), geo.getLatitude());
        }
    },
    //添加我的坐标
    addMyPoint: function (lng, lat) {
        var me = this,
        map = me.getMap(),
        icon = new BMap.Icon("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);
    }
});

　　效果图：