（1）首选我们获取高德api的秘钥。之后创建一个key秘钥。

https://console.amap.com/dev/key/app

（2）创建完成之后使用下面的请求方式。

里面的subdistrict代表一级二级三级搜索。可以拿到全国的省、市、区数据。
https://restapi.amap.com/v3/config/district?subdistrict=3&key=上面请求的key

（3）代码环节

一、页面展示

二、说明

我这里的逻辑是在点击了省之后才能继续渲染下一层市的数据。最开始会把所有数据存起来，点击了当前的省的时候会把这个省当下的所有数据继续存在另外一个数组里。这样市里就可以选了，同理区也是一样。同时为了防止我全部选完之后再次选省后面数据不改变，我加了刷新。逻辑有了代码就好理解了，我这里就直接上代码了

1.我们直接拿高德数据渲染，更新了也可以时时更新。

2.接着就是页面了。我这边使用了colorui组件库
3.逻辑。上面的注意点已说明

4.完整的代码
getLocationList.js文件

const baseUrl = 'https://restapi.amap.com/v3/config/district'
const subdistrict = '3' //地区层级
const key = 'sajdajdajhdajhdajdhajdhajdhajdhajdhahd' //申请的秘钥
const type = 'GET'export function LocationList() {return new Promise((resolve, reject) => {uni.request({method: type,url: baseUrl +'?subdistrict=' + subdistrict +'&key='+key,dataType: 'json',}).then((response) => {setTimeout(function() {uni.hideLoading();}, 200);let [error, res] = response;resolve(res.data);}).catch(error => {let [err, res] = error;reject(err)})});}

index.vue

<template><view class="form-box boxshadow"><view class="cu-form-group" style="white-space: nowrap;"><view class="title require">客户地址：</view><view class="address-box"><view class="picker-box"><view class="district-box"><picker @change="bindCountyChange" :value="conIndex" :range="areas.map(item => item.name)"><view class="pick-city"><view class="picker-length">{{ pickerCounty }}</view><view class="cuIcon-triangledownfill icon-morecity text-gray"></view></view></picker></view><view class="city-box"><picker @change="bindCityChange" :value="cityIndex" :range="cityList.map(item => item.name)"><view class="pick-city"><view class="picker-length">{{ pickerCity }}</view><view class="cuIcon-triangledownfill icon-morecity text-gray"></view></view></picker></view><view class="district-box"><picker @change="bindDisChange" :value="disIndex" :range="districtList.map(item => item.name)"><view class="pick-city"><view class="picker-length">{{ pickerDistrict }}</view><view class="cuIcon-triangledownfill icon-morecity text-gray"></view></view></picker></view></view></view></view></view>
</template><script>
import { LocationList } from '@/api/getLocationList.js';
export default {data() {return {areas:[],cityList: [],conIndex: '',cityIndex: '',disIndex: '',classIndex: '',districtList: [],clientClassList: [],};},async onLoad(options) {const locationlist = await LocationList();this.areas = locationlist.districts[0].districts;},computed: {pickerCustomerClass() {const classObj = this.clientClassList[this.classIndex];return classObj ? classObj['customer_category_name'] : '请选择客户分类';},pickerCounty() {const countyObj = this.areas[this.conIndex];return countyObj ? countyObj.name : '选择省';},pickerCity() {const cityObj = this.cityList[this.cityIndex];return cityObj ? cityObj.name : '选择市';},pickerDistrict() {const districtObj = this.districtList[this.disIndex];return districtObj ? districtObj.name : '选择区';}},methods: {//更新区数据updateDistrict(index) {this.disIndex = '';this.districtList = this.areas[Number(index)]['districts'][Number(index)]['districts'];},//更新市区数据updateCountry(index) {this.cityIndex = '';this.disIndex = '';this.cityList = this.areas[Number(index)]['districts'];},// 省份选择器bindCountyChange: function(e) {const index = e.target.value;this.conIndex = index;this.updateCountry(this.conIndex);},//市选择器bindCityChange: function(e) {const index = e.target.value;this.cityIndex = index;this.updateDistrict(this.cityIndex);},//区选择器bindDisChange(e) {const index = e.target.value;this.disIndex = index;}}
};
</script><style scoped>.cu-form-group picker::after {content: "";display: none;}.cu-form-group picker {position: inherit;padding-right: 19rpx;}/deep/ .cu-form-group .title {padding-right: 0 ;}.picker-box {display: flex;}.pick-city {display: flex;align-items: center;}.picker-length{width: 86rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.picker-input-box {display: flex;justify-content: space-between;align-items: center;width: auto;font-size: 30rpx;font-weight: 500;line-height: 60rpx;color: black;}.icon-morecity {font-size: 90rpx;transform: scale(0.8);}
</style>

喜欢的话给我点个赞呗，有问题的话可以找我。本人菜鸟，如有问题请多关照。

uniapp三级地区picker选择器相关推荐

uniapp中的picker选择器
目录一.普通选择器二.多列选择器三.时间选择器四.日期选择器一.普通选择器 <template><view><picker @change="bind ...
uniapp中使用picker制作简单的三级地址选择组件
uniapp中使用picker制作简单的三级地址选择组件使用案例 view部分 js部分 address.json 能够根据父组件传的值显示默认的数据使用案例 //数据回显,根据id addres ...
uniapp picker选择器注意点
uniapp自身带有部分基础的组件,今天就来讲讲picker选择器! picker选择器从底部弹起的滚动选择器.支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择 ...
关于uni-app的Picker选择器默认选择的问题
在使用uni-app的Picker选择器时,有时选择器的默认选择是后台传递的参数进行决定,或者是上一个界面传递过来的参数进行默认展示,我们该怎么解决呢? 我这里展示上一个界面传递参数改变picker的 ...
uni-app三级联动笔记
uniapp官方组件picker uniapp使用三级联动picker,官方文档省市区选择器不适用5+app.h5和支付宝小程序,必须适用插件(日期.时间.三级联动picker)(mpvue-pick ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
小程序picker标题_微信小程序实现自定义picker选择器弹窗内容
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml 选 ...
vue学习之mintui picker选择器实现省市二级联动
Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh- ...
iOS增强版的UIDatePicker，省市县三级联动地址选择器（ActionSheetCustomPicker）
一般的项目中都会有一个选择地址的需求,系统的UIDatePicker肯定是不够的,找了个比较好用的库 ActionSheetCustomPicker github地址:ActionSheetCusto ...

uniapp三级地区picker选择器

今天来介绍一个三级选地区的picker选择器。大概长这样。

地址的数据我是拿高德api获取的数据。获取的数据是这样。