EXT 使用百度地图

1，效果如图

2，index.html 中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>

3，view

/**
 * Created by Sukla on 2017/12/19.
 */
Ext.define('app.view.common.baiduMap.BaiduMapView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.baidu-map',
    controller:'baiduMapController',
    cls: 'my-baidu-map',
    layout: {
        type: 'border'
    },
    defaults: {
        collapsible: true,
        split: true,
        bodyPadding: 10
    },
    viewModel: {
        data: {
            dqtype:'all',
            businese: [
                {
                    id: 'bus001',
                    name: '公司001',
                    khlx: 'a',
                    hy: 'a',
                    khdj: 'a',
                    dq: 'a',
                    xy: {x: 116.417, y: 39.909}
                },
                {
                    id: 'bus002',
                    name: '公司002',
                    khlx: 'b',
                    hy: 'b',
                    khdj: 'a',
                    dq: 'b',
                    xy: {x: 121.433, y: 34.500}
                },
                {
                    id: 'bus003',
                    name: '公司003',
                    khlx: 'c',
                    hy: 'c',
                    khdj: 'a',
                    dq: 'c',
                    xy: {x: 117.200, y: 39.133}
                },
                {
                    id: 'bus004',
                    name: '公司004',
                    khlx: 'a',
                    hy: 'd',
                    khdj: 'a',
                    dq: 'd',
                    xy: {x: 114.100, y: 22.200}
                },
                {
                    id: 'bus005',
                    name: '公司005',
                    khlx: 'b',
                    hy: 'e',
                    khdj: 'b',
                    dq: 'a',
                    xy: {x: 113.233, y: 23.166}
                },
                {
                    id: 'bus006',
                    name: '公司006',
                    khlx: 'c',
                    hy: 'f',
                    khdj: 'b',
                    dq: 'b',
                    xy: {x: 113.516, y: 22.300}
                }
            ]
        },
        stores: {
            thestore: Ext.create('Ext.data.Store', {
                data: [

                ]
            }),
            khlxstore: Ext.create('Ext.data.Store', {
                data: [

                ]
            }),
            hystore: Ext.create('Ext.data.Store', {
                data: [

                ]
            }),
            khdjstore: Ext.create('Ext.data.Store', {
                data: [

                ]
            })
        }
    },
    items: [
        {
            region: 'west',
            width: 200,
            minWidth: 200,
            maxWidth: 200,
            header: false,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    region: 'west',
                    xtype: 'form',
                    width: 210,
                    minWidth: 210,
                    maxWidth: 210,
                    padding: '0 10 0 0',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            height: 30,
                            layout: {
                                type: 'hbox',
                                align: 'stretch'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    flex: 1
                                },
                                {
                                    xtype: 'button',
                                    width: 30
                                }
                            ]
                        },
                        {
                            height: 240,
                            layout: {
                                type: 'table',
                                columns: 2
                            },
                            defaults: {
                                width: 100,
                                height: 80,
                                layout: {
                                    type: 'fit',
                                    align: 'stretch'
                                },
                                items: [
                                    {
                                        xtype: 'button',
                                        cls: 'map-btn',
                                        handler:'changeDqtype'
                                    }
                                ]
                            },
                            items: [
                                {
                                    cls: 'map-btn-1',
                                    itemId:'dqtype-a'
                                },
                                {
                                    cls: 'map-btn-2',
                                    itemId:'dqtype-b'
                                },
                                {
                                    colspan: 2,
                                    cls: 'map-btn-3',
                                    reference:'dqTypeDefault',
                                    width: 200,
                                    padding: '0 50',
                                    itemId:'dqtype-all'
                                },
                                {
                                    cls: 'map-btn-4',
                                    itemId:'dqtype-c'
                                },
                                {
                                    cls: 'map-btn-5',
                                    itemId:'dqtype-d'
                                }
                            ]
                        },
                        {
                            xtype: 'treepanel',
                            minHeight: 100,
                            rootVisible: false,
                            store: Ext.create('Ext.data.TreeStore', {
                                data: [
                                    {id:'khdj',leaf: true, text: '类别A'},
                                    {id:'hy',leaf: true, text: '类别B'},
                                    {id:'khlx',leaf: true, text: '类别C'}
                                ]
                            }),
                            listeners:{
                                selectionchange:function(){
                                    var id=this.getSelection()[0].id;
                                    var thestore=this.up('baidu-map').getViewModel().get(id+'store');
                                    this.up('baidu-map').getViewModel().set('thestore', thestore);
                                }
                            }
                        },
                        {
                            xtype: 'grid',
                            height: 200,
                            scrollable: 'y',
                            header: false,
                            bind: {
                                store: '{thestore}'
                            },
                            selModel: {
                                type: 'checkboxmodel'
                            },
                            columns: {
                                items: [
                                    {
                                        text: '所属',
                                        flex: 2,
                                        dataIndex: 'classname'
                                    },
                                    {
                                        flex: 1,
                                        text: '数量',
                                        dataIndex: 'classnum'
                                    }
                                ]
                            },
                            listeners:{
                                selectionchange:'selChangeMap'
                            }
                        }
                    ]
                }
            ]
        },
        {
            region: 'center',
            collapsible: false,
            layout: {
                type: 'fit'
            },
            items: [
                {
                    html: '<div id="myMap" style="background-color: #22bd7a;width:100%;height:100%"></div>'
                }
            ]
        }
    ],
    listeners: {
        afterRender:'mapAfterRender'
    }
})

4，controller

/**
 * Created by Sukla on 2017/12/19.
 */
Ext.define('app.view.common.baiduMap.BaiduMapController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.baiduMapController',

    changeDqtype:function(btn){
        var btnCtArr=btn.ownerCt.ownerCt.items.items;
        for(var i=0;i<btnCtArr.length;i++){
            btnCtArr[i].down('button').removeCls('active-mapbtn')
        }
        btn.addCls('active-mapbtn')
        var dqtype=btn.ownerCt.itemId.split('-')[1];
        this.getViewModel().set('dqtype',dqtype)
        this.setMapStore()
    },
    selChangeMap:function(grid){
        var selArr=grid.getSelection();
        var ponitArr=[];
        for(var i=0;i<selArr.length;i++){
            var selObj=selArr[i].get('items')
            for(var j=0;j<selObj.length;j++){
                var xyobj=selObj[j].xy
                ponitArr.push(xyobj)
            }
        }
        if(ponitArr.length>0){
            this.prinfBaiduMap(ponitArr);
        }
    },
    mapAfterRender:function(){
        var btn=this.lookupReference('dqTypeDefault').down('button')
        this[btn.handler](btn)
    },
    setMapStore:function () {
        /**
         * 格式化选项数据
         */
        var arr = this.getViewModel().get('businese');
        var keyarr=['khlx','hy','khdj'];//客户类型 、行业、客户等级
        var thestore='';//默认值
        var dqtype=this.getViewModel().get('dqtype')=='all'?false:this.getViewModel().get('dqtype');
        for(var n=0;n<keyarr.length;n++){
            var keyStr=keyarr[n];
            var dataobj = {};
            for (var i = 0; i < arr.length; i++) {
                var obj = arr[i];
                if(dqtype){
                    if(arr[i].dq!=dqtype){
                        continue;
                    }
                }
                var key = obj[keyStr];
                if (dataobj[key]) {
                    dataobj[key].num++
                    dataobj[key].items.push(obj)
                } else {
                    dataobj[key] = {}
                    dataobj[key].num = 1;
                    dataobj[key].items=[]
                    dataobj[key].items .push(obj)
                };
            }
            var data = [];
            for (var key in dataobj) {
                var obj = {
                    classname: key,
                    classnum: dataobj[key].num,
                    items:dataobj[key].items
                }
                data.push(obj)
            }
            var store = Ext.create('Ext.data.Store', {
                data: data
            })
            this.getViewModel().set(keyStr+'store', store);
            if(!thestore){
                this.getViewModel().set('thestore', store);
            }
        }

        /**
         * 画地图
         */

        this.prinfBaiduMap();
    },
    prinfBaiduMap: function (xyArr) {
        var map = new BMap.Map('myMap');//创建地图实例
        var point = !xyArr?new BMap.Point(116.404, 39.915):new BMap.Point(xyArr[0].x, xyArr[0].y);//创建点坐标
        map.centerAndZoom(point, 6);//初始化地图，设置中心坐标和地图级别 1级表示全球 18级最小 4级表示国家
        map.enableScrollWheelZoom();//开启滚轮缩放功能
        map.disableDoubleClickZoom();//关闭双击放大功能
        map.enableKeyboard();//开启键盘操作功能
        if(xyArr){
            var arr = xyArr
            map.clearOverlays();//清除点
            for (var i = 0; i < arr.length; i++) {
                var point = arr[i]
                var pt = new BMap.Point(point.x, point.y);
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25), // 指定定位位置
                    imageOffset: new BMap.Size(0, 0 - 9 * 25) // 设置图片偏移
                });
                var marker2 = new BMap.Marker(pt, {icon: myIcon});//创建标注
                map.addOverlay(marker2);//将标注添加到地图中
            }
        }
    }
})

5，部分css

.my-baidu-map .map-btn{
    background-color: #fff !important;
    background-image: url(images/khjz/map/u5302.png) !important;
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center center;
}
.map-btn-2 .map-btn{
    background-image: url(images/khjz/map/u5292.png) !important;
}
.map-btn-3 .map-btn{
    //background-image: url(images/khjz/map/u5331.png) !important;
    background-image: none!important;
}
.map-btn-4 .map-btn{
    background-image: url(images/khjz/map/u5312.png) !important;
}
.map-btn-5 .map-btn{
    background-image: url(images/khjz/map/u5322.png) !important;
}
.map-btn.x-btn-focus ,.map-btn.active-mapbtn{
    background-color: #22bd7a !important;
}