省市县选择三级联动（使用高德API实现）

省市县选择如果自己实现是比较麻烦的，最近发现可以使用高德实现省市县联动选择，实现后来记录一下供大家参考。

文章目录

• • • 最终效果：
    • 一、准备工作
    • 二、完整页面代码

      最终效果：

      实现单次点击获取省市县名称，选择完成后返回获取省市县数组

      

      一、准备工作

      高德API平台申请自己的key，申请的类型为Web服务

      高德API平台：https://console.amap.com/dev/key/app

      

      二、完整页面代码

      主要实现在于 通过发送高德api请求：

      https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=你的key

      获取到所有的省市县数据

      通过代码处理后，放到Element UI的级联选择组件中

        
      
          
          
        
      
      
        import axios from 'axios';
        export default {
          data() {
            return {
              selectedArea: [],
              provinceList: [],
              CITY: [],
              XIAN: [],
              /*获取数据的url key需要自己到高德地图申请*/
              url: 'https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=自己的key',
              /*选项列表*/
              cityOptions: [],
              /*选项列表格式*/
              cityProps: {
                value: 'name',
                label: 'name',
                children: 'districts',
              },
              selectedOptions: null, //选中的数据
            };
          },
          methods: {
            /* 获取省市区选项 */
            getCity() {
              axios.get(this.url, null).then((res) => {
                console.log(res)
                this.cityOptions = this.getTreeData(
                  res.data.districts[0].districts
                )
              })
            },
            /* 递归处理末尾项district为0的空项 */
            getTreeData(data) {
              // 循环遍历返回的数据
              for (var i = 0; i