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，即可完成对百度地图的一系列自定义操作。