ExtJs 4.0 DeskTop集成 百度地图API

经过3天的奋斗最终搞了出来， 网上的资料非常少，希望小⑦的文章对读者有点帮助，PS：小⑦非常努力的~。

不废话，上代码了。

首先。去百度官网Copy一个模版

http://api.map.baidu.com/lbsapi/creatmap/ 

依据这个模版改的 里面凝视也非常具体就不多说了 

导入百度地图API：

这里的KEY 不知道有没有什么限制，麻烦各位去申请一个吧。百度KEY地址：http://lbsyun.baidu.com/

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3FpX2p1aGFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

创建KEY的时候会有个选项：校验方式，一定要选择IP白名单校验（不知道为什么用SN校验拿到的KEY不能用）

拿到的KEY就加入到 ak=“KEY” 

然后创建DeskTop自己定义的Modules

NoteMap.js：

/*
   Ext Js 4  DeskTop  BaiduMap
   尛⑦ 2014年4月23日
   DeskTop结合百度地图
*/

Ext.define('V_Ext.Notemap', {
    extend: 'Ext.ux.desktop.Module',

    requires: [

    ],

    id:'notemap',

    init : function(){
        this.launcher = {
            iconCls:'notepad',
            handler : this.createWindow,
            scope: this
        }
    },
    createWindow:function (){
    	var desktop = this.app.getDesktop();
        var wiew = desktop.getWindow('notemap');
    	var strHtml = "<div style='width:100%;height:100%;border:1px' id='mapDiv'>12</div>";
    	wiew=desktop.createWindow({
            autoShow:true,
    		id:'mapView',
    		title: '百度破图',
    		width:800,
            height:600,
            layout:'fit',
            iconCls:'.anchorBL{display:none; } ',
    		items:[{
    			id:'myMap',
    			html:strHtml,
    			region: 'center'
    		}]
    	});
    	function initMap(){
    		map = new BMap.Map('mapDiv');
    		var poi= new BMap.Point(121.487899,31.249162);  //我这里是上海 就写的上海的坐标了
    		map.centerAndZoom(poi,18);
    		map.enableScrollWheelZoom();
    		/*setMapEvent();//设置地图事件
	       */
	        addMapControl();//向地图加入控件
    		addMarker();//向地图中加入marker
    	}
    	//地图控件加入函数：
		    function addMapControl(){
		        //向地图中加入缩放控件
			var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
			//map.addControl(ctrl_nav);
		                //向地图中加入比例尺控件
			var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
			//map.addControl(ctrl_sca);
		    }
		    //marker 标注点数组
	    	var markerArr = [{title:"上海巴士",content:"我的备注",point:"121.573112|31.268779",isOpen:1,icon:{w:23,h:23,l:22,t:22,x:6,lb:5}},
	    	{title:"我的标记",content:"我的备注",point:"121.506153|31.245056",isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}},
	    		{title:"我的标记",content:"我的备注",point:"121.513698|31.2608",isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		 ];
	    //创建marker
	    function addMarker(){
	        for(var i=0;i<markerArr.length;i++){
	            var json = markerArr[i];
	            var p0 = json.point.split("|")[0];
	            var p1 = json.point.split("|")[1];
	            var point = new BMap.Point(p0,p1);
				var iconImg = createIcon(json.icon);
	            var marker = new BMap.Marker(point,{icon:iconImg});
				var iw = createInfoWindow(i);
				var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
				marker.setLabel(label);
	            map.addOverlay(marker);
	            label.setStyle({
	                        borderColor:"#808080",
	                        color:"#333",
	                        cursor:"pointer"
	            });
				//marker 事件
				(function(){
					var index = i;
					var _iw = createInfoWindow(i);
					var _marker = marker;
					_marker.addEventListener("click",function(){
					    this.openInfoWindow(_iw);
				    });
				    _iw.addEventListener("open",function(){
					    _marker.getLabel().hide();
				    })
				    _iw.addEventListener("close",function(){
					    _marker.getLabel().show();
				    })
					label.addEventListener("click",function(){
					    _marker.openInfoWindow(_iw);
				    })
					if(!!json.isOpen){
						label.hide();
						_marker.openInfoWindow(_iw);
					}
				})()
	        }
	    }
	     //创建InfoWindow
		    function createInfoWindow(i){
		        var json = markerArr[i];
		        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
		        return iw;
		    }
		    //创建一个Icon （标注图标）
		    function createIcon(json){
		        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
		        return icon;
		    }
    	initMap();
    }
});

须要注意的一点就是 V_Ext 是我项目的名字  假设默认的话应该是  MyDesktop ，不要在意这个细节。