行政区信息的获取
这里用到的行政区信息是从高德开放平台获取的,地址是:
https://developer.amap.com/api/webservice/guide/api/district
如果信息只需要获取一次的话,其实并不需要注册,直接页面下方的服务示例中查询就可以:
打开开发人员工具,再次点击查询按钮,这时再开发人员工具的“网络”界面中,会看到刚刚发出来一条查询请求:
右键选中这条请求记录,选择“复制响应”,然后打开记事本或者其他编辑器,就可以保存查询结果了。
组件编写
保存成数据对象
打开Vue项目,新建一个TS或JS文件,对刚才的文本字段掐头去尾,保留所有省的信息为一个数组,
组件编写
这里以NaiveUI 为例进行组件制作,当然也可以使用其他模板,但是需要注意性能问题。
数据的提取主要通过Vue计算属性实现,在数据JSON结构中筛选不同层级的数据。
然后通过Vue监听属性,将变量的变化传递出去。
<template>
<n-space>
<n-select v-model:value="l1" :options="level1" @update-value="l2='';l3=''"></n-select>
<n-select v-model:value="l2" :options="level2" @update-value="l3=''"></n-select>
<n-select v-model:value="l3" :options="level3"></n-select>
</n-space>
</template>
<script>
import districts from "../assets/data/districts";
export default {
name: "selectDistrict",
data() {
return {
l1: '',
l2: '',
l3: '',
d: ''
}
},
computed: {
level1() {
var dis = []
for (let i in districts) {
dis.push({label: districts[i].name, value: i})
}
return dis
},
level2() {
if (this.l1 == '')
return []
var dis = []
let ddd = districts[this.l1].districts
for (let i in ddd) {
dis.push({label: ddd[i].name, value: i})
}
return dis
},
level3() {
if (this.l2 == '')
return []
var dis = []
let ddd = districts[this.l1].districts[this.l2].districts
for (let i in ddd) {
dis.push({label: ddd[i].name, value: i})
}
return dis
},
district() {
if (this.l1 == '' || this.l2 == '')
return {}
let d = districts[this.l1].districts[this.l2]
if (d.districts.length > 0 && this.l3 != '')
d = d.districts[this.l3]
let loc = d.center.split(',')
//d.lng=loc[0]
d.lng = parseFloat(loc[0])
d.lat = parseFloat(loc[1])
console.log(d)
this.d = d;
return d
}
},
watch: {
district(newvalue, oldvalue) {
this.$emit("selectedDistrict", newvalue);
}
}
}
</script>
<style scoped>
.n-select {
width: 100px;
}
</style>
组件使用
使用此组件直接在父组件中使用如下代码即可
<select-district @selectedDistrict="(e)=>{this.district=e}"></select-district>