vue-cli v2.0版本如何使用高德地图遮罩功能(如何引入高德安全密钥)

先看看完成后的样子：

这里就不说基础了，有不懂可以去查一下，网上关于基础还是挺多的

或者可以看看官方文档：入口高德地图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);
        })
      })
    },

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