注意：1.本示例代码为vue3，高德地图版本为2.0

           2.本示例代码是基于我的主页中的《vue3中使用高德地图apijs》文章写的，如果有不懂的可以点击主页进去查看    

一.创建地图，若已创建则忽略

https://blog.csdn.net/qq_50931953/article/details/139803103?spm=1001.2014.3001.5502

二.下载行政边界JSON数据，并引用到项目中

 dataV地图数据网址：DataV.GeoAtlas地理小工具系列

这个数据平台可以下载省级、市级、区(镇)级的行政区域，没有村级行政区域的数据

1.选择要使用的区域

点击要下载的区域，若不选择则是下载全国所有的省市区(镇)的数据

​

2.下载数据 

​

三.将行政边界JSON数据添加到地图中

将刚下载好的json数据放到项目中，最好将文件名改为英文

import area from "你的json路径";

...

        .then((AMap) =>{

        ...

        initDistrictPolygon(AMap);

}

initDistrictPolygon(AMap){

  // 绘制polygon

  var polygons = [];

  for (var i = 0; i < area.features.length; i += 1) {

    var polygon = new AMap.Polygon({

      path: area.features[i].geometry.coordinates[0],

      strokeColor: "#000000", //边界线颜色

      strokeWeight: 2, //边界线粗细

      strokeOpacity: 1,  //边界线透明度

      fillOpacity: 0.1, //填充物透明度

      fillColor: "#1791fc", //填充物颜色

      zIndex:1, //层级

      bubble: true, //将覆盖物的事件冒泡到地图上(例如：给地图添加一个点击事件，此属性为false时，则鼠标点击事件不会生效，因为是点的覆盖物，若此属性为true时，则生效)

    });

    polygons.push(polygon);

  }

  map.value.add(polygons);

}

效果图