ExtJs 4.0 DeskTop集成 百度地图API

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

不废话，上代码了。

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

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

根据这个模版改的 里面注释也很详细就不多说了 

导入百度地图API：

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

创建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 ，不要在意这个细节。