vue 高德地图多边形_20秒使用vue高德地图绘制行政区域

效果图：

image.png

步骤一：先在最外成html挂载行政区域所用的代码

步骤二：直接赋值代码：

import AMap from "AMap";

export default {

data() {

return {

weXinAmapMap: null,

};

},

watch: {},

created() {},

mounted() {

this.mapInit('map');

},

methods: {

mapInit(domName) {

let _self = this;

let domDiv = domName || 'map'

_self.weXinAmapMap = new AMap.Map(domDiv, {

center: [118.54436,33.011971],

mapStyle: "amap://styles/1610afaf5f3e06b9757b81fce626e050",

zooms: [1, 18],

zoom: 9.6,

});

AMap.event.addListener(_self.weXinAmapMap, "click", function(e) {

var x = e.lnglat.getLng();

var y = e.lnglat.getLat();

});

_self.drawDistrictBorder();

},

/*

*@description:绘制盱眙县的区域边界图

*@date: 2020-09-20 14:42:15

*/

drawDistrictBorder() {

let _self = this;

//加载行政区划插件

var district = null;

var opts = {

subdistrict: 0, //获取边界不需要返回下级行政区

extensions: "all", //返回行政区边界坐标组等具体信息

level: "district", //查询行政级别为 市

};

district = new AMap.DistrictSearch(opts);

//设置行政区

district.setLevel("district");

district.search("盱眙县", function(status, result) {

var polygons = [];

var bounds = result.districtList[0].boundaries;

if (bounds) {

for (var i = 0, l = bounds.length; i < l; i++) {

//生成行政区划polygon

var polygon = new AMap.Polygon({

strokeWeight: 3,

strokeColor: "#00F6FF",

path: bounds[i],

fillColor: '#00F6FF',

fillOpacity: 0.1,

});

polygons.push(polygon);

}

}

_self.weXinAmapMap.add(polygons);

});

},

}

};

.map {

margin-left: 20px;

width: 776px;

height: 600px;

}

祝君安好~

另，因为文章写得匆忙，若无法显示的及时留言，看到回复