老大喊你起来营业了
醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧!
这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统。其中,有一个需求要引入腾讯地图做一个省市区三级联动。话不多说,撸起袖子加油干。
腾讯地图
首先,你得注册账号;然后申请密钥(具体操作,自己可以打开腾讯地图官网进行了解)
然后,打开webservice API,这里我们想要的都有;主要用到的就这两个接口:
http://apis.map.qq.com/ws/district/v1/list```
http://apis.map.qq.com/ws/district/v1/getchildren
```
三级联动
我们要实现的三级联动效果应当是:
点击省的时候,对应下拉框出现;当选中的时候,无论后面市和区选了没选,都应当是清空的
当点击市的时候,对应下拉框应该请求对应的内容(这个其实应该在选中省的时候就应该请求);然后选中市,无论后面区选了没选,都应当是清空的
点击区的时候,下拉框的内容其实在选中市的时候已经请求好了
跨域问题
原本我以为我可以了,三级联动也可以了。事实是,我可能想多了!!!这里报了跨域,那么照理说在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)
})
}
}