乐趣区

关于高德地图:vuecli-v20版本如何使用高德地图遮罩功能如何引入高德安全密钥

jiezi

先看看实现后的样子：

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

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

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

退出移动版