目录

一、静态页面组件搭建：

二、调用搞得地图api获取全国行政区划

在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，分享以下实现方法，以下内容为具体的实现过程：

使用elementUI的form表单，并做一下基本的修改，得到以下结果：

2.然后是组件的数据配置：

表单的基本数据存放在form对象里面，至于省市县三个下拉菜单的数据，则以数组的形式存放，分别为provinceList[];cityList[];countyListp[]。

3.接下来处理重点数据:三级下拉菜单的联动：

3.1点击省下拉菜单获取省份：

 主要技术点在于：通过调取高德地图的API接口，获取全国省市县行政区划：

在调用高德地图api之前， 须先在高德开放平台注册个人账户并申请对应的密钥，以下内容为申请个人账户和密钥的详细过程：

1.首先进入高德开放平台官网，进行账号注册登录，登录后，点击右上角的控制台区域

2.进入控制台页面后，选择：应用管理—我的应用：

 3.点击添加按钮：如下图：

4. 进行如图所示的配置：key名称自定义，用于进行账号区分，服务平台格局自身需要选择，这里默认选择Web服务，然后勾选用户协议，并提交。如下图：

5.创建好应用后，点击对应应用列表的设置选项：如图：

 6.选择行政区划查询api：如图：

 7.进入这个行政区划api的使用方法教程如图：

8. api的相关请求参数：

 接下来，就可以进行这个api的调用了：

按照官网的教程，进行本地的获取行政区划的接口api的请求，如下代码所示：

 // 根据市区，匹配县区

做了这些程序配置后，就可以实现三级下拉菜单的联动了。效果图如下