高德地图VUE只显示部分地区遮罩其他地区

高德地图VUE只显示部分地区遮罩其他地区

1.在main.js中引入vue，AMap.DistrictSearch为遮罩层必须引入

// 引入高德地图
import VueAMap from 'vue-amap';
// 初始化地图
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({key: '98acc2caa9e2aa0ee72327ab83002fc6',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', &#", "AMap.Geolocation", "AMap.Geocoder", "AMap.Polyline", "AMap.MouseTool", 'AMap.PolylineEditor', 'AMap.DistrictSearch'],// 默认高德 sdk 版本为 1.4.4v: '1.4.4'
});

2.Vue页面代码

<template><!-- 管网纠错 --><div class="equipment pipeline"><!-- tab切换 --><el-tabs type="border-card" @tab-click="handleClick"><el-tab-pane label="联系单统计" lazy>11<el-amapvid="amapDemo":center="center":zoom="zoom"pitch-enable="false":events="events":style="{height: '600px'}"ref="map"><!-- 遮罩层 --><el-amap-polygonstrokeColor="#00eeff"strokeOpacity="1"fillColor="#71B3ff"fillOpacity="0.5"v-for="(polygon, index) in polygons":key="index+'polygons'"strokeWeight="2":path="polygon.De.path"></el-amap-polygon></el-amap></el-tab-pane><el-tab-pane label="联系单分析" lazy>22</el-tab-pane></el-tabs></div>
</template><script  type="text/javascript" src="=1.4.4&key='申请的key值'&plugin=AMap.DistrictSearch"></script>
<script>
// 列表
import { pipelineManagementList } from "@/api/article";
export default {data() {   var that = this;return {tableData: [],currentPage4: 1,totalCount: 1,pageSize: 10,pageNo: 1,// 地图相关内容开始// 缩放程度,值越大越详细zoom: 10,// 中心点center: [114.919301, 37.619886],events: this.eventsFun(),polygons: [], // 绘画的点district: null, // 行政区划插件的对象//地图结束//   表单验证rules: {},};},methods: {// tab切换handleClick(event) {console.log(event.index);if (event.index == "1") {console.log(1111)}},// 画地图的遮罩层drawBounds () {var that = this;//加载行政区划插件if (!that.district) {// 实例化DistrictSearchvar opts = {subdistrict: 0, // 获取边界不需要返回下级行政区extensions: "all", //返回行政区边界坐标组等具体信息level: "city", // 查询行政级别为 市};that.district = new AMap.DistrictSearch(opts);}// 行政区查询that.district.search('宁晋县', 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; // 这里的bounds是一个数组,但是里面只有一个元素就是bounds[0] if (bounds) {for (var i = 0;i < bounds.length; i++) { // 所以这个循环只会执行一次// 生成行政区划polygonvar polygon = new AMap.Polygon({path: [outer, bounds[i]],});that.polygons.push(polygon);}}AMap.Polygon.bind(that.polygons); // 交给amap进行值处理});},// 地图事件eventsFun () {let that = thisreturn {// 地图加载完成时执行的方法complete () {that.drawBounds() // 画地图的遮罩层}}},}}
</script>
<style lang="scss" scoped></style>

3.效果图