效果图
基础步骤我这里就不过多介绍了，大家可以去看文档：vue-amap文档或者vue-amap官网
实现步骤思路： 百度上都是一个省整的，没有往下分，或者是一个市，县整的，都没有往下分级。既然没有，那我们就可以用各个市循环拼接成一个省，用各个县拼接成一个市，以此类推，用下一级的行政区划拼接成上一级的行政区划，这样就相当于是分级显示的了。
话不多说，上代码：
HTML
<el-amap>
<div v-for="(item,indexx) in polygonss" :key="indexx">
<el-amap-polygon
strokeColor="red"
strokeOpacity="1"
fillColor="#fff"
fillOpacity="0.5"
v-for="(polygon, index) in item"
:key="index"
strokeWeight="2"
:path="polygon.Ce.path"
></el-amap-polygon>
</div>
</el-amap>
JS
data() {
return {
polygonss:[[],[],[],[],[],[],[],[],[],[],[],[],[]],//13个市的数组
citys:['徐州市','常州市','南通市','连云港市','盐城市','扬州市','镇江市','泰州市','宿迁市','苏州市','南京市','无锡市','淮安市'],//13个市的名称
}
},
methods: {
drawBounds() {
var that = this;
//加载行政区划插件
if (!that.district) {
//实例化DistrictSearch
var opts = {
subdistrict: 0, //获取边界不需要返回下级行政区
extensions: "all", //返回行政区边界坐标组等具体信息
level: "city", //查询行政级别为 市
};
that.district = new AMap.DistrictSearch(opts);
}
//循环各个市的行政区查询 *********关键性代码
for(let i=0;i<this.polygonss.length;i++){
that.district.search(this.citys[i], function (status, result) {
that.polygonss[i] = [];
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
path: bounds[i],
});
that.polygonss[i].push(polygon);
}
}
AMap.Polygon.bind(that.polygonss[i]);
});
}
},
},
mounted() {
setTimeout(() => {//延迟加载
this.drawBounds();
}, 200);
},
没了，结束了，是不是很简单呐
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~
