使用高德地图plugin['AMap.DistrictSearch']出现no_data问题

今天在使用高德地图的时候出现了一个奇葩问题，我从高德地图api官网案例《行政边界查询》，地址：https://lbs.amap.com/demo/javascript-api/example/district-search/draw-district-boundaries。

结果出现了no_data的问题，后来通过官方得知：高德地图自2021年12月02日升级，此次升级之后申请的key必须配备安全密钥一起使用

 

 

 以下是我的完整代码（安装@amap/amap-jsapi-loader就不说了）：

import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'MapBoundary',
  data() {
    return {
      map: null
    }
  },
  beforeCreate() {
　　// 这是主要的引入密钥
    window._AMapSecurityConfig = {
      securityJsCode: '你的密钥' // 密钥
    }
    AMapLoader.load({
      key: '你的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [] // 需要使用的的插件列表
    })
      .then((AMap) => {
        this.$nextTick(() => this.initMap(AMap))
      })
      .catch((e) => {
        console.error(e)
      })
  },
  methods: {
    /**
     * 加载地图
     * @date 2022-06-09
     * @param {any} AMap
     * @returns {any}
     */
    initMap(AMap) {
      this.map = new AMap.Map('container', {
        // 设置地图容器id
        zoom: 9, // 初始化地图级别
        center: [106.628201, 26.646694], // 初始化地图中心点位置
        viewMode: '3D',
        layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
      })
      this.map.on('complete', () => {
        this.darwMapBoundary(AMap)
      })
    },
    /**
     * 绘制边界
     * @date 2022-06-09
     * @param {any} AMap
     * @returns {any}
     */
    darwMapBoundary(AMap) {
      const that = this
      const opts = {
        subdistrict: 1,
        level: 'city',
        extensions: 'all'
      }
      AMap.plugin(
        ['AMap.DistrictSearch', 'AMap.Object3DLayer', 'AMap.Object3D'],
        function () {
          let district = new AMap.DistrictSearch(opts)
          district.search('贵阳', function (status, result) {
            console.log(status)
            console.log(result)
            if (status === 'complete') {
              let bounds = result.districtList[0].boundaries
              let polygons = []
              for (let i = 0; i < bounds.length; i++) {
                //生成行政区划polygon
                const polygon = new AMap.Polygon({
                  map: that.map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.7,
                  fillColor: '#CCF3FF',
                  strokeColor: '#CC66CC'
                })
                polygons.push(polygon)
              }
              that.map.add(polygons)
              that.map.setFitView()
              // 添加3D模式
              const object3Dlayer = new AMap.Object3DLayer({ zIndex: 3 })
              that.map.add(object3Dlayer)
              var height = 25000
              var color = '#034c6c' // rgba
              var wall = new AMap.Object3D.Wall({
                path: bounds,
                height: height,
                color: color
              })
              wall.transparent = true
              object3Dlayer.add(wall)
            }
          })
        }
      )
    }
  }
}