先看看实现后的样子:

这里就不说根底了,有不懂能够去查一下,网上对于根底还是挺多的

或者能够看看官网文档:入口高德地图vue应用根底疏导

看完就能够把高德地图的根底图层引入到我的项目中了

而后再看看官网遮罩示例:遮罩示例

然而想要应用遮罩插件还须要以下配置:

1、配置平安密钥(留神:不是key)

window._AMapSecurityConfig = {      securityJsCode:'你的平安密钥',    };

留神:配置平安密钥必须在初始化地图根底图层(AMapLoader.load)之前!否则没有任何成果!

2、引入省市区查问插件(其余插件也是这样引入的)

AMapLoader.load({        key:"你的key",        version:"2.0",//这个是版本        plugins:['AMap.DistrictSearch']//插件在这里引入      }).then((AMap) => {        let map = new AMap.Map("container",{          resizeEnable: true,          zoom: 11,//地图初始的缩放倍数          center:[res.city.longitude,res.city.latitude],//初始化后地图展现的核心地位        });        this.initPolygon(city, map);//这是创立遮罩的办法,我把城市和初始化的地图传进去      }).catch( e => {        console.log(e);      })

3、初始化遮罩

initPolygon(city, map) {      AMap.plugin('AMap.DistrictSearch', function () {        new AMap.DistrictSearch({          extensions: 'all',          subdistrict: 0        }).search(city, function(status, result) {          let 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)          ];          let holes = result.districtList[0].boundaries;          let pathArray = [outer];          pathArray.push.apply(pathArray, holes);          //增加遮罩款式          let polygon = new AMap.Polygon({            pathL: pathArray,            strokeColor: '#00eeff',            strokeWeight: 1,            fillColor: '#71B3ff',            fillOpacity: 0.5          });          polygon.setPath(pathArray);          map.add(polygon);        })      })    },

这样,一个遮罩就弄出来了