百度地图实现只展示某一个省份地图，点击市以后高亮

一、弯路记录

刚开始走了弯路，各种百度以后使用的以下方法。

实现效果是将地图上当前省份以外的地方添加覆盖物，当前省份的地图可以缩小放大，遇到的问题是地图div边缘始终有一道细细的白边，未找到方法去除，所以此方法弃用。

    getMap2() {
      // 创建地图实例
      var map = new BMap.Map('map2');
      //设置地图的中心点如成都的坐标
      var point = new BMap.Point(103.051695, 30.028231);
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 7);
      // 将地图在水平位置上移动x像素，垂直位置上移动y像素(x,y)
      map.panBy(0, 30);
      // 允许滚轮缩放
      map.enableScrollWheelZoom();
      //只显示某个省份的关键代码
      var cityName = '四川省';
      var bdary = new BMap.Boundary();
      bdary.get(cityName, function (rs) {
        let arr = rs.boundaries;
        if (arr.length == 0) return;
        //获取行政区域
        var EN_JW = '180, 90;'; //东北角
        var NW_JW = '-180,  90;'; //西北角
        var WS_JW = '-180, -90;'; //西南角
        var SE_JW = '180, -90;'; //东南角
        let max = arr.reduce((a, b) => (a.length > b.length ? a : b));
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(max + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: 'none', fillColor: '#0B1D35', fillOpacity: 1, strokeOpacity: 0.5 }); //建立多边形覆盖物
        map.addOverlay(ply1);
      });
    },复制

效果图：

 二、正确解法

使用echarts实现，最开始也在网上看到了这种方法，但是各种百度没有找到对应省份的json文件，最后还是多亏ui指路==》DataV.GeoAtlas地理小工具系列

    getArea() {
      const myChart = this.$echarts.init(document.getElementById('map2'));
      this.http.get(window.location.origin + '/sichuanmap.json').then(ret => {
        //防止本地发起axios出现跨域问题，需要写成http://localhost:8999/sichuan.json
        this.$echarts.registerMap('sichuan', ret.data);
        // 注册矢量地图数据
        var option = {
          visualMap: {
            // 视觉映射组件
            show: false,
            inverse: true, // 反转
            top: '70%',
            bottom: '2%',
            left: '2%',
            textStyle: {
              fontsize: 12,
              color: '#fff'
            },
            splitList: [
              // 自定义范围
              { start: 0, end: 100 },
              { start: 100, end: 300 },
              { start: 300, end: 500 },
              { start: 500, end: 1000 },
              { start: 1000 }
            ],
            color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色
          },
          series: [
            {
              type: 'map',
              map: 'sichuan',
              zoom: 1.2,
              top: '8%',
              x: 'center',
              label: {
                show: true, // 显示
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  // 静态的时候显示的默认样式
                  areaColor: '#53ACF5', // 地图颜色
                  borderColor: '#27FFFF' // 边框颜色
                },
                emphasis: {
                  // 鼠标移入动态的时候显示的默认样式
                  borderWidth: 2, // 边框宽度
                  areaColor: '#53ACF5', // 地图颜色
                  label: {
                    color: '#fff'
                  }
                }
              }
 
            }
          ]
        };
        myChart.setOption(option);
      });
    },复制