echarts遇上百度地图打点案例（vue）

效果图：

1.html文件引入百度api,ak是自己申请的密钥

    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxxxxxxxxxxxxx"></script>

2.vue代码： 

 <div id="mapEchars" style="width: 100%;height:440px;background:#0b0519;"></div>

3.js代码

import echarts from 'echarts'
require('echarts/extension/bmap/bmap');//必须


export default {
  data() {
    return {
      myChart: Object,
      lng:104.114129,//经度
      lat:37.550339,//纬度
      zoom:4//缩放比例
    };
  },
  methods: {
    getMap() { 
      let _this=this
      this.myChart = echarts.init(document.getElementById("mapEchars"))
      var data = [
        {name: '山东省', value: 200,},
        {name: '北京市', value: 120},
        {name: '广东省', value: 180},
        {name: '河南省', value: 50},
        {name: '天津市', value: 100}
      ];
      var geoCoordMap = {
          '山东省':[117.000923,36.675807],
          '河南省':[113.665412,34.757975],
          '北京市':[116.405285,39.904989],
          '天津市':[117.190182,39.125596],
          '广东省':[113.280637,23.125178]

      };
      var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                  res.push({
                      name: data[i].name,
                      value: geoCoord.concat(data[i].value)
                  });
              }
          }
          console.log(res)
          return res;
      };
      let option = {
        backgroundColor: '#0b0519',//地图背景色更改
          title: {
              text: '全国营业点分布图',
              subtext: '',
              sublink: '',
              left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: function (a) {
                return `${a['name']}</br>营业点数量: ${a['value'][2]}`
            }
          },
          bmap: {
              center: [this.lng, this.lat],//设置中心点经纬度
              zoom: this.zoom,//设置缩放比例
              roam: true,//是否支持缩放
              mapStyle: {//地图不同类型的颜色设置，以及是否展示
                styleJson: [{
                  'featureType': 'water',//水
                  'elementType': 'all',
                  'stylers': {
                      'color': '#0b0519'
                  }
                }, {
                  'featureType': 'land',//土地
                  'elementType': 'all',
                  'stylers': {
                      'color': '#23375f'
                  }
                }, {
                  'featureType': 'railway',//铁路
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
                }, {
                  'featureType': 'highway',//公路
                  'elementType': 'all',
                  'stylers': {
                      'color': '#0b0519'
                  }
                }, {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                      'visibility': 'off'
                  }
                }, 
              // {
              //     'featureType': 'arterial',//动脉
              //     'elementType': 'geometry',
              //     'stylers': {
              //         'color': '#0b0519'
              //     }
              // }, {
              //     'featureType': 'arterial',
              //     'elementType': 'geometry.fill',
              //     'stylers': {
              //         'color': '#0b0519'
              //     }
              // },
                {
                  'featureType': 'poi',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
                }, {
                  'featureType': 'green',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
                }, {
                  'featureType': 'subway',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
                },
              //  {
              //     'featureType': 'manmade',//人造
              //     'elementType': 'all',
              //     'stylers': {
              //         'color': '#0b0519'
              //     }
              // }, {
              //     'featureType': 'local',//地方的
              //     'elementType': 'all',
              //     'stylers': {
              //         'color': '#d1d1d1'
              //     }
              // }, {
              //     'featureType': 'arterial',
              //     'elementType': 'labels',
              //     'stylers': {
              //         'visibility': 'off'
              //     }
              // }, 
                {
                  'featureType': 'boundary',//边界
                  'elementType': 'all',
                  'stylers': {
                      'color': '#0b0519'
                  }
                }, 
              // {
              //     'featureType': 'building',//建筑
              //     'elementType': 'all',
              //     'stylers': {
              //         'color': '#0b0519'
              //     }
              // },
                {
                'featureType': 'label',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#0b0519'
                }
              }]
              }
          },
          series : [
              {
                  name: '营业点',
                  type: 'effectScatter',//是散点图的一种
                  coordinateSystem: 'bmap',//结合百度地图
                  data: convertData(data.sort(function (a, b) {
                      return b.value - a.value;
                  }).slice(0, 6)),
                  symbolSize: function (val) {
                      return val[2] / 10;
                  },
                  encode: {
                      value: 2
                  },
                  showEffectOn: 'render',//显示效果
                  rippleEffect: {//水波涟漪效果
                      brushType: 'stroke'
                  },
                  hoverAnimation: true,//鼠标放上有动画
                  label: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  },
                  itemStyle: {
                      color: '#409eff',
                      shadowBlur: 10,
                      shadowColor: '#333',
                      normal: {//加这句话是因为上面改颜色无效
                          color: '#409eff', //打点的标志颜色
                         
                      }
                  },
                  zlevel: 1
              }
          ]
      };   
      //this.myChart.clear()
      //this.myChart.setOption(option, true)
      this.myChart.setOption(option)
      
      // 获取百度地图实例，使用百度地图自带的控件
      var bmap = this.myChart.getModel().getComponent('bmap').getBMap();
      this.myChart.off('click');//点击后会触发多次，这里使用off避免重复调用
      this.myChart.on('click', function (params) {
        // console.log(params)
        // bmap.zoomTo(bmap.getZoom() + 1); //设置缩放级别
        bmap.centerAndZoom(new BMap.Point(params.value[0],params.value[1]),bmap.getZoom() + 1);//每次执行，再次定位中心点 和 缩放级别
      })

      // bmap.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
      // bmap.addControl(new BMap.ScaleControl());// 添加比例尺控件
      bmap.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
      bmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
      bmap.enableScrollWheelZoom();//启用滚轮放大缩小
      // bmap.addControl(new BMap.MapTypeControl());//添加地图类型控件
      bmap.disable3DBuilding();
      // var mapStyle={  style : "midnight" }//地图颜色风格
      // bmap.setMapStyle(mapStyle);

      // this.myChart.on('bmaproam',(params,value)=>{//监听缩放
      //   // console.log(bmap.getCenter().lng)//经度
      //   // console.log(bmap.getCenter().lat)//纬度
      //   // console.log(bmap.getZoom());//缩放级别
      //   bmap.centerAndZoom(new BMap.Point(bmap.getCenter().lng,bmap.getCenter().lat),bmap.getZoom());//每次执行，再次定位中心点 和 缩放级别

      //   const _options = this.myChart.getOption();
      //   // console.log(this.myChart.getOption())
      //   const zoom = _options.bmap[0].zoom;//缩放级别
      //   // console.log(zoom)//缩放级别
      //   console.log(bmap.getBounds())
      //   var bounds=bmap.getBounds()
      //   var sw = bounds.getSouthWest();//获取西南角的经纬度(左下端点)
      //   console.log(sw)
      //   var ne = bounds.getNorthEast();//获取东北角的经纬度(右上端点)
      //   console.log(ne)
      //   var wn = new BMap.Point(sw.lng, ne.lat);//获取西北角的经纬度(左上端点)
      //   console.log(wn)
      //   var es = new BMap.Point(ne.lng, sw.lat);//获取东南角的经纬度(右下端点)
      //   console.log(es)
      //   //下面这3行，用于实时更新地图时，地图位置和缩放比例不变。如果没有实时刷新则可以注释
      //   this.lng=bmap.getCenter().lng
      //   this.lat=bmap.getCenter().lat
      //   this.zoom=bmap.getZoom()
      // })

       let zoomdrag =(()=>{
       var bounds=bmap.getBounds()
       var sw = bounds.getSouthWest()//获取西南角的经纬度(左下端点)
       var ne = bounds.getNorthEast();//获取东北角的经纬度(右上端点)
       var wn = new BMap.Point(sw.lng, ne.lat);//获取西北角的经纬度(左上端点)
       var es = new BMap.Point(ne.lng, sw.lat);//获取东南角的经纬度(右下端点)
       this.lng=bmap.getCenter().lng//经度
       this.lat=bmap.getCenter().lat//纬度
       this.lngLatZoom=[Number(this.lng.toFixed(2)),Number(this.lat.toFixed(2)),this.zoom]//经度 纬度 放大级别 用于watch监听
       this.zoom=bmap.getZoom()//获取缩放级别
      })
       bmap.addEventListener("zoomend", zoomdrag) //监听地图缩放
       bmap.addEventListener("dragend", zoomdrag) //监听地图拖拽平移

    }   
  },
  mounted() {
   this.getMap()
  }
};
</script>

<style lang="scss">
.mapEcharts{
  background: rgba(11, 5, 25,0);
  padding:10px;
  border-radius:5px;
  .ec-extension-bmap{
    background: #23375f !important;//解决地图刷新，或放大 背景为白色的bug
  }
  .BMap_cpyCtrl,.anchorBL{//百度版权信息，logo相关信息隐藏
    display:none;
  }
  .BMap_omBtn.BMap_omBtnClosed,.anchorBR .BMap_omOutFrame,.BMap_omCtrl{//右下角小尖头，查看小块区域隐藏
    display:none;
  }
}