效果图
代码
<template>
<div>
<el-amap
vid="amapDemo"
:center="center"
:zoom="zoom"
pitch-enable="false"
:events="events"
:style="{height: '48.4rem'}"
ref="map"
>
<el-amap-polygon
strokeColor="#00eeff"
strokeOpacity="1"
fillColor="#71B3ff"
fillOpacity="0.5"
v-for="(polygon, index) in polygons"
:key="index+'polygons'"
strokeWeight="2"
:path="polygon.Ce.path"
></el-amap-polygon>
</el-amap>
</div>
</template>
<script>
export default {
data () {
return {
zoom: 10,
center: [106.519006, 29],
events: this.eventsFun(),
polygons: [],
district: null,
}
},
methods: {
drawBounds () {
var that = this;
if (!that.district) {
var opts = {
subdistrict: 0,
extensions: "all",
level: "city",
};
that.district = new AMap.DistrictSearch(opts);
}
let code = '江津';
that.district.search(code, function (status, result) {
that.polygons = [];
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true),
]
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
path: [outer, bounds[i]],
});
that.polygons.push(polygon);
}
}
AMap.Polygon.bind(that.polygons);
});
},
eventsFun () {
let that = this
return {
complete () {
that.drawBounds()
}
}
},
}
}
</script>
参考资料
https://blog.csdn.net/qq_35084280/article/details/99574745