vue可视化数据大屏项目开发时，使用高德地图会遇到绘制区域边界的情况，这里我们可以使用AMap.DistrictSearch加AMap.Polygon来绘制边界。

首先需要配置安全密钥，引用高德地图

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'安全秘钥',
    }
</script>
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=your key &plugin=AMap.DistrictSearch"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

渲染高德地图

使用AMap.DistrictSearch查询边界坐标。使用AMap.Polygon绘制边界。

getAmap() {
  var that = this
  that.map = new AMap.Map('mapInfo', {
    scrollWheel: true,
    viewMode: '2D',
    resizeEnable: true,
    zoom: 12,
    maxZoom: 30,
    minZoom: 0,
    mapStyle: 'amap://styles/df41fac869f2854d9ea6a987036e8377',
    center: [120.077703, 29.310889],
  })
  //获取边界坐标点
  AMap.plugin('AMap.DistrictSearch', function () {
    // 创建行政区查询对象
    var district = new AMap.DistrictSearch({
      // 返回行政区边界坐标等具体信息
      extensions: 'all',
      // 设置查询行政区级别为 区
      level: 'district'
    })

    district.search('义乌市', function(status, result) {
      console.log('义乌市')
      console.log(result)
      console.log(status)
      var bounds = result.districtList[0].boundaries
      var polygons = []
      if (bounds) {
        for (var i = 0, l = bounds.length; i < l; i++) {
          //生成行政区划polygon
          var polygon = new AMap.Polygon({
            map: that.map,
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.7,
            fillColor: '#CCF3FF',
            strokeColor: '#CC66CC'
          })
          polygons.push(polygon)
        }
        // 地图自适应
        map.setFitView()
      }
    })
  })
},