Extjs4 嵌入百度地图

这个是加载地图的panel:

/*
	地图展示panel
*/

Ext.define('MAP.view.Map',{
    extend:'Ext.panel.Panel',
    alias: 'widget.map',
    region:'center',
    
    initComponent:function(){
        Ext.apply(this,{
            html:'加载地图panel'
        });
        this.callParent();
    }
});
Ext.define('MAP.controller.Controllers', {
    extend: 'Ext.app.Controller',
    views: [
        'Map',
        'Top',
        'Details'
    ],
    init: function() {
        this.control({
            'map': {
                afterrender:function( component, eOpts){
                	//初始化地图
                	render: this.initMap(component.el.dom);
                }
            },

            'top > button[action=search]':{
                click:function(btn){
                    console.log("search");

                    //获取值
                    var panel = btn.up('panel');
                    var city = panel.down('textfield[name=city]').getValue();
                    var keyword = panel.down('textfield[name=keyword]').getValue();

                    console.log(city+keyword);

                    var searchOptions = {
                        onSearchComplete:function(results){
                            console.log(results);                            
                        }
                    }
                    var local = new BMap.LocalSearch(city, searchOptions);  
                    local.search(keyword);
                }
            }
        });
    },

    
    /*
    	初始化地图
    */
    initMap:function(div){
    	/*
			初始化地图
    	*/
    	var map = new BMap.Map(div);
		//默认位置
		var point = new BMap.Point(116.3972,39.9096);
		map.centerAndZoom(point, 12);

        /*
            获取当前位置
        */
        var localCity = new BMap.LocalCity();
        localCity.get(function(result){
            var cityName = result.name;
            var localPoint = new BMap.Point(result.center.lng, result.center.lat);
            map.setCenter(localPoint,cityName);
        });

        /*
            启用鼠标滚动
        */
        map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用

    }

});

 

发表评论