bmap+echarts 百度地图绘制散点图

效果图

一，引入插件

<script crossorigin="anonymous" integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>
 <script crossorigin="anonymous" integrity="sha512-hEU+WXzocJv+jXFWnuGS64U6IxdA13PpoxCSi9CDYWQQoc3bV22AigWDoBdfvEyRotB0wMA1TY10uQxSofhTRw==" src="https://lib.baomitu.com/echarts/5.2.0/extension/bmap.min.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxxx"></script>

bmap为echarts中集成地图

二，准备地图容器，设置大小

    <style>
        html, body, #container {
            height: 100%
        }
    </style>

<div id="container"></div>

三，js部分，具体见注释（数据是写死的，最好让后台传）

<script>
    var myChart = echarts.init(document.getElementById('container'));
    var data = [
        {name: '南通', value: 9},
        {name: '昆山', value: 19},
        {name: '连云港', value: 29},
        {name: '淮安', value: 39},
        {name: '泰州', value: 6},
        {name: '宿迁', value: 16},
        {name: '苏州', value: 26},
        {name: '镇江', value: 20},
        {name: '扬州', value: 30},
        {name: '常州', value: 15},
        {name: '南京', value: 3},
        {name: '徐州', value: 9},

     ];
    var geoCoordMap = {
        '南通': [121.05, 32.08],
        '昆山': [120.95, 31.39],
        '连云港': [119.16, 34.59],
        '常熟': [120.74, 31.64],
        '淮安': [119.15, 33.5],
        '泰州': [119.9, 32.49],
        '宿迁': [118.3, 33.96],
        '苏州': [120.62, 31.32],
        '镇江': [119.44, 32.2],
        '扬州': [119.42, 32.39],
        '常州': [119.95, 31.79],
        '南京': [118.78, 32.04],
        '徐州': [117.2, 34.26],
    };
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            console.log(geoCoord);
            if (geoCoord) {
                res.push({name: data[i].name, value: geoCoord.concat(data[i].value)});
            }
        }
        return res;
    };
    var option = {
        title: {　　//标题
            text: '',
            subtext: '',　　//副标题
            sublink: '',　　//副标题链接
            left: 'center'　　//标题位置，居中
        },
        tooltip: {
          formatter: function (params) {
              return (
              "城市: " + params.name + "<br>空气质量: " + params.value[2]
            );
          }
        },
        bmap: {　　//百度地图的设置
            center: [118.78, 32.07],　　//中心点
            zoom: 8,　　　　　　　　　//缩放　　　　　　　
            roam: true,　　　　　　//漫游
            mapStyle: {
                styleJson: [
                    {
                        'featureType': 'land',     //调整土地颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#081734'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#04406F'
                        }
                    },
                    {
                        'featureType': 'building',   //调整建筑物标签是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'highway',     //调整高速道路颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#015B99'
                        }
                    },
                    {
                        'featureType': 'highway',    //调整高速名字是否可视
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',   //调整一些干道颜色
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'water',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#044161'
                        }
                    },
                    {
                        'featureType': 'subway',    //调整地铁颜色
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#003051'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有的标签的边缘颜色
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#313131'
                        }
                    },
                    {
                        'featureType': 'all',     //调整所有标签的填充颜色
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#FFFFFF'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'geometry',
                        'stylers': {
                            'lightness': -65
                        }
                    },
                    {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'lightness': -40
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#8b8787',
                            'weight': '1',
                            'lightness': -29
                        }
                    }
                ]
            }
        },

        series: [
            {
                name: '空气质量',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                })),
                symbolSize: function (val) {
                    return val[2] / 2;
                },
                rippleEffect: {brushType: 'stroke'},
                hoverAnimation: true,
                label: {normal: {formatter: '{b}', position: 'right', show: true}},
                itemStyle: {normal: {color: '#780385', shadowBlur: 10, shadowColor: '#333'}},
                zlevel: 1
            },
        ]
    };
    myChart.setOption(option);
</script>

获取map实例，调用事件

 var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addEventListener("click", function(){
        alert("您点击了地图。");
    })

在此处获取了echarts中的bmap，即可完成对百度地图的一系列自定义操作。