vue中使用高德地图隐藏不需要的板块

vue中使用高德地图隐藏不需要的板块

效果图：

直接在全局index中引入：

在更新版本后密钥和key都必须输入，不然会出现没有数据的情况

<script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: '密钥值',  //密钥
      }
    </script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch"></script>

<template>
  <div
    id="container"
    style="position: relative; width: 100%; height: 500px"
  ></div>
</template>

<script>
export default {
  name: "Amap",
  data() {
    return {
      map: "",
    };
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      let that = this;
      // this.MapLoader().then((AMap) => {
        that.map = new AMap.Map("container", {
          zoom: 9,
          center: [116.44923, 40.207714],
          pitch: 0,
          viewMode: "3D",
        });
        // 异步加载插件
        // AMap.ToolBar: 滑动工具条， AMap.Scale: 比例尺
        // 一次加载多个
        AMap.plugin("AMap.DistrictSearch",  ()=> {
          var district = new AMap.DistrictSearch({
            extensions: "all",
            subdistrict: 0,
            level: "district",
          });
          district.search("北京市", function(status, result){
            //   // 外多边形坐标数组和内多边形坐标数组
            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),
            ]; // 使得遮盖填充反向
            console.log(result,9999)
            var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合

            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            var polygon = new AMap.Polygon({
              pathL: pathArray,
              //线条颜色，使用16进制颜色代码赋值。默认值为#006600
              strokeColor: "#6e93f9",
              strokeWeight: 2,
              fillColor: "rgba(255,255,255)",
              fillOpacity: 1,
              strokeStyle: "dashed",
              strokeDasharray: [2, 2],
            });
            polygon.setPath(pathArray);
            that.map.add(polygon);
        
    },
  },
};
</script>

<style scoped>
/*隐藏高德地图logo，版本号*/
/deep/ .amap-logo {
  visibility: hidden;
}
/deep/ .amap-copyright {
  visibility: hidden;
}
</style>