老大喊你起来营业了

醒醒，打工人！开始工作了，今天讲讲我的踩坑记录吧！

这次我们用的是vue-admin-webapp，基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统。其中，有一个需求要引入腾讯地图做一个省市区三级联动。话不多说，撸起袖子加油干。

腾讯地图

1. 首先，你得注册账号；然后申请密钥(具体操作，自己可以打开腾讯地图官网进行了解)

2. 然后，打开webservice API，这里我们想要的都有；主要用到的就这两个接口：
   http://apis.map.qq.com/ws/district/v1/list```
   http://apis.map.qq.com/ws/district/v1/getchildren
   ```

三级联动

我们要实现的三级联动效果应当是:

1. 点击省的时候，对应下拉框出现；当选中的时候，无论后面市和区选了没选，都应当是清空的

2. 当点击市的时候，对应下拉框应该请求对应的内容(这个其实应该在选中省的时候就应该请求)；然后选中市，无论后面区选了没选，都应当是清空的

3. 点击区的时候，下拉框的内容其实在选中市的时候已经请求好了

跨域问题

原本我以为我可以了，三级联动也可以了。事实是，我可能想多了！！！这里报了跨域，那么照理说在vue.config.js中配置一下应该是可以的

1.先在vue.config.js中配置了一下

proxy: {

//名字可以自定义，用于指定哪些请求需要被 target 对应的主机代理

'/map': {

target: 'https://apis.map.qq.com',

changeOrigin: true, //这里设置是否跨域

pathRewrite: { // 路径重写

'^/map': ''

},

}

2.再在.env.development环境中配置一下

VUE_APP_BASE_API2 = '/map'

3.如果不行的话可以用这个jsonp,先全局安装，然后npm i vue-jsonp -S；再在main.js中全局引入import { VueJsonp } from ‘vue-jsonp’
Vue.use(VueJsonp)
在页面中直接,如下所示，就可以了

this.$jsonp(process.env.VUE_APP_BASE_API2+'/ws/district/v1/list',{

key:'yourkey',

output:'jsonp'

}).then(res => {

console.log(res)

// let data = res.data.result

// this.cityList = data[0]

// this.countryList = []

// this.loading = false

}).catch(err => {

console.log(err)

})

开发ing

1.在页面中引入 import axios from “axios”;
2.直接用的elementui里面的select选择器

:model="editForm" :rules="editRules" ref="editForm" style="width: 100%" >

prop="kitchenAddress"

label="地域:"

:label-width="formLabelWidth"

>

v-model="editForm.province"

@change="chooseProvince"

:loading = "loading"

placeholder="请选择省"

size="small"

style="width:100px"

>

v-for="item in provinceList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

v-model="editForm.city"

@change="chooseCity"

ref="city"

:loading = "loading"

placeholder="请选择市"

size="small"

style="width:100px"

>

v-for="item in cityList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

v-model="editForm.country"

@change="chooseCountry"

ref="country"

:loading = "loading"

placeholder="请选择区"

size="small"

style="width:100px"

>

v-for="item in countryList"

:key="item.id"

:label="item.fullname"

:value="item.id"

>

3.开始获取省市区列表 这里yourkey指的是你自己申请的key

getProvince(){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/list?key=yourkey')

.then(res => {

this.loading = true;

let data = res.data.result

this.provinceList = data[0]

this.loading = false

}).catch(err => {

console.log(err)

})

}

根据省id来获取市的列表

chooseProvince(e){

this.$set(this.editForm,"city")

this.$set(this.editForm,"country")

let provinceId = e

this.loading = true

if(!!provinceId){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/getchildren?key=yourkey&id='+provinceId)

.then(res => {

let data = res.data.result

this.cityList = data[0]

this.countryList = []

this.loading = false

}).catch(err => {

console.log(err)

})

}

}

根据市id获取区列表

chooseCity(id){

let cityId = id

this.loading = true

this.$set(this.editForm,"country")

if(!!cityId){

axios.get(process.env.VUE_APP_BASE_API2+'/ws/district/v1/getchildren?key=yourkey&id='+cityId)

.then(res => {

let data = res.data.result

this.loading = false

this.countryList = data[0]

}).catch(err => {

console.log(err)

})

}

}