在地图上标注甘肃省庆阳市镇原县，给其标注色块。

效果图：

前期准备：

1.下载高德地图依赖包：

npm i @amap/amap-jsapi-loader --save

2.引入依赖包：

import AMapLoader from '@amap/amap-jsapi-loader';

官网参考链接：lbs.amap.com/api/javascr…

具体代码：

export default {
  name: 'largeScreen1',
  data() {
    return {
      gaodeMap: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initGaoDeMap();
    });
  },
  beforeDestroy() {
    if (!this.gaodeMap) {
      return;
    }
    this.gaodeMap.dispose();
    this.gaodeMap = null;
  },
  methods: {
    // 绘制甘肃省庆阳市镇原县地图
    initGaoDeMap() {
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: 'xx' // 密钥 
      }
      AMapLoader.load({
        key: 'xx', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: ['AMap.DistrictSearch'],
      }).then((AMap) => {
        this.gaodeMap = new AMap.Map('gaodeMap', {
          center: [106.967048, 35.877142],
          viewMode: '3D',
          labelzIndex: 130,
          pitch: 40,
          zoom: 10,
          zooms: [9, 15],//地图显示的缩放级别范围, 默认为 [2, 20] ，
          // rotation: 20,//初始地图顺时针旋转的角度
          // mapStyle: 'amap://styles/dark'
        });
        // 创建行政区划查询对象
        const districtSearch = new AMap.DistrictSearch({
          extensions: 'all',
          level: 'district',//level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
          //   subdistrict: 0
        });
        // 查询并显示
        districtSearch.search('621027', (status, result) => {
          if (status === 'complete') {
            var geojosn = result.districtList[0].boundaries[1];//该县拿到数据有两组，正常获取下标0的就可以啦
            var polygon = new AMap.Polygon({
              path: geojosn,//多边形路径
              strokeColor: 'blue',//线条颜色
              strokeWeight: 2,//线条宽度
              //   fillColor: 'rgba(0,0,0,0)',//多边形填充颜色
              //   fillOpacity: 0.7//填充透明度
            });
            // 添加多边形到地图上
            polygon.setMap(this.gaodeMap);
            // 调整地图视野到多边形所覆盖的区域
            this.gaodeMap.setFitView(polygon);
          }
        });
      });
    },
  }
}

只显示某省某市某县的地图，其它部分不显示

效果图：

将 initGaoDeMap 方法修改为：

    // 绘制甘肃省庆阳市镇原县地图
    initGaoDeMap() {
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: 'xxx' // 密钥 
      }
      AMapLoader.load({
        key: 'xx', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: ['AMap.DistrictSearch'],
      }).then((AMap) => {
        // 创建行政区划查询对象
        const districtSearch = new AMap.DistrictSearch({
          extensions: 'all',
          level: 'district',//level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
          //   subdistrict: 0
        });
        // 查询并显示
        districtSearch.search('621027', (status, result) => {
          if (status === 'complete') {
            var bounds = result.districtList[0].boundaries;
            var mask = []
            for (var i = 0; i < bounds.length; i += 1) {
              mask.push([bounds[i]])
            }
            this.gaodeMap = new AMap.Map('gaodeMap', {
              mask: mask,
              center: [106.967048, 35.877142],
              viewMode: '3D',
              labelzIndex: 130,
              pitch: 40,
              zoom: 10,
              zooms: [9, 15],//地图显示的缩放级别范围, 默认为 [2, 20] ，
              // rotation: 20,//初始地图顺时针旋转的角度
              // mapStyle: 'amap://styles/dark'
            });
            //添加描边
            for (var j = 0; j < bounds.length; j += 1) {
              new AMap.Polyline({
                path: bounds[j],
                strokeColor: '#ffffff',
                strokeWeight: 4,
                map: this.gaodeMap
              })
            }
          }
        });
      });
    },

并给渲染地图的div添加样式：

background: rgba(0, 0, 0, 0) !important;

去掉高德地图水印的方法：

:deep() .amap-logo {
  display: none !important;
}
:deep() .amap-copyright {
  display: none !important;
}

参考文章：关于高德地图只显示一个市的区域、其他区域不显示的解决方案