高德行政区划查询（vue实现）

这篇说下，如何使用高德来实现行政区划查询并划出行政区的范围，实现参考了官网的案例，不过官网的案例是html写的，我这里用vue实现。

官网案例：行政区边界查询示例

一、最终效果：

二、页面完整代码：

<template>  
  <div>    <div id="container" ref="amap"></div>  
  
  
    <div class="input-card-container">  
      <el-form @submit.prevent="onSubmit" class="input-card">  
        <el-form-item label="行政区边界查询" style="color: grey;">  
          <el-select v-model="level" placeholder="请选择行政级别">  
            <el-option value="district">district</el-option>  
            <el-option value="city">city</el-option>  
            <el-option value="province">province</el-option>  
          </el-select>  
          <!--        <el-input v-model="district" placeholder="请输入名称或adcode"></el-input>-->  
          <el-input v-model="keyWord" placeholder="请输入名称或adcode"></el-input>  
  
        </el-form-item>  
        <el-button type="primary" @click="onSubmit">查询</el-button>  
      </el-form>    </div>  
  
  </div>  
  
</template>  
  
<script>  
  
  //安全密钥
  window._AMapSecurityConfig = {  
    securityJsCode: "安全密钥",  
  };  
  
  import AMapLoader from '@amap/amap-jsapi-loader';  
  export default {  
    name: "Class",  
    data() {  
      return {  
        level:'district',  
        district:null,  
        polygon:null,  
        keyWord:'朝阳区',  
      };  
    },  
    created() {  
      this.initAMap();  
  
    },  
    methods: {  
  
      initAMap() {  
        AMapLoader.load({  
          key: 'key', // 申请好的Web端开发者Key，首次调用 load 时必填  
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15          plugins: ['AMap.DistrictSearch','AMap.Polygon']  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加  
        })  
          .then((AMap) => {  
            this.map = new AMap.Map('container', {  
              // 设置地图容器id  
              //viewMode: '3D', // 默认2d地图模式  
              zoom: 12, // 初始化地图级别  
              zooms: [5, 30], // 地图缩放范围  
              // 可以设置初始化当前位置  
              center: [116.397428, 39.90923] // 初始化地图位置  
            })  
          })  
      },  
      /**绘制区域*/  
      drawBounds() {  
        if (!this.district) {  
          var opts = {  
            subdistrict: 0,  
            extensions: 'all',  
            level: this.level // 使用数据属性 level          };  
          this.district = new AMap.DistrictSearch(opts);  
        }  
  
        if (!this.keyWord) {  
          console.warn('名称不能为空');  
          return;        }  
  
        // this.district.setLevel(this.level); // 使用数据属性 level  
        this.district.level=this.level;  
        console.log(this.district,"district-----------")  
        //行政区查询  
        this.district.search(this.keyWord, (status, result) => { // 使用箭头函数保留 this 上下文  
          if (this.polygon) {  
            this.map.remove(this.polygon); // 使用 this.map            this.polygon = null;  
            //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误  
            //查询成功时，result 即为对应的行政区信息  
          }  
  
          console.log(result,"result---------")  
          if (!result || !result.districtList || !result.districtList[0]) {  
            console.warn('请正确填写名称或更新其他名称');  
            return;          }  
  
          const bounds = result.districtList[0].boundaries;  
          if (bounds) {  
            for (let i = 0; i < bounds.length; i += 1) {  
              bounds[i] = [bounds[i]];  
            }  
  
            this.polygon = new AMap.Polygon({  
              strokeWeight: 1,  
              path: bounds,  
              fillOpacity: 0.4,  
              fillColor: '#80d8ff',  
              strokeColor: '#0091ea'  
            });  
  
            this.map.add(this.polygon);  
            this.map.setFitView(this.polygon);  
          }  
        });  
      },  
  
  
      onSubmit(){  
        this.drawBounds(); // 在表单提交时调用 drawBounds 方法  
      },  
  
  
    }  
  };  
</script>  
  
<style scoped lang="scss">  
  #container {  
    padding: 0px;  
    margin: 0px;  
    width: 100%;  
    height: 900px;  
    position: relative;  
  }  
  .input-card-container {  
    /*position: absolute;*/  
    position: fixed;  
    bottom: 20px;  
    right: 20px;  
    z-index: 1;  
  }  
</style>

三、遇到的问题

代码没有问题，也没有报错
发现发送查询行政区请求时 INVALID_USER_SCODE（无效用户代码）

jsonp_65086_1713950536165_({
    "info": "INVALID_USER_SCODE",
    "infocode": "10008",
    "status": "0",
    "sec_code_debug": "",
    "key": "",
    "sec_code": ""
})

原因：

只是用了key，没有使用安全密钥

key和安全密钥需要一起使用才可以

解决：

在前端<script>标签中，也就是import上面添加以下代码就可以了

window._AMapSecurityConfig = {  
  securityJsCode: "安全密钥",  
};