省市县选择三级联动(使用高德API实现)

省市县选择如果自己实现是比较麻烦的,最近发现可以使用高德实现省市县联动选择,实现后来记录一下供大家参考。

文章目录

      • 最终效果:
      • 一、准备工作
      • 二、完整页面代码

最终效果:

实现单次点击获取省市县名称,选择完成后返回获取省市县数组
在这里插入图片描述

一、准备工作

高德API平台申请自己的key,申请的类型为Web服务

高德API平台:https://console.amap.com/dev/key/app

在这里插入图片描述

二、完整页面代码

主要实现在于 通过发送高德api请求:
https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=你的key
获取到所有的省市县数据
通过代码处理后,放到Element UI的级联选择组件中

<template><div><!-- 引入Element UI Cascader组件 --><el-cascaderfilterableplaceholder="请选择"ref="addPoint":props="cityProps":options="cityOptions"clearable@active-item-change="handleActiveItemChange"@change="handleChange"v-model="selectedOptions"></el-cascader></div>
</template><script>import axios from 'axios';export default {data() {return {selectedArea: [],provinceList: [],CITY: [],XIAN: [],/*获取数据的url key需要自己到高德地图申请*/url: 'https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=自己的key',/*选项列表*/cityOptions: [],/*选项列表格式*/cityProps: {value: 'name',label: 'name',children: 'districts',},selectedOptions: null, //选中的数据};},methods: {/* 获取省市区选项 */getCity() {axios.get(this.url, null).then((res) => {console.log(res)this.cityOptions = this.getTreeData(res.data.districts[0].districts)})},/* 递归处理末尾项district为0的空项 */getTreeData(data) {// 循环遍历返回的数据for (var i = 0; i < data.length; i++) {if (data[i].districts.length < 1) {// districts若为空数组,则将districts设为undefineddata[i].districts = undefined} else {// districts若不为空数组,则继续 递归调用 本方法this.getTreeData(data[i].districts)}}return data},handleActiveItemChange(seleted){console.log(seleted,"handleActiveItemChange-----")},handleChange(seleted){console.log(seleted,"handleChange-----")}},created() {this.getCity();},};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中的多态性

形成多态性前提&#xff1a;有继承关系&#xff0c;且子类重写父类的方法 场景 一般用于方法的参数传递&#xff0c;形参声明父类&#xff0c;实参传入子类&#xff0c;这样在方法体中调用被重写方法的时候&#xff0c;实际执行的是子类重写的方法&#xff0c;以此形成多态&…

web端即时通信技术

web端即时通信技术 对于IM/消息推送这类即时通讯系统而言&#xff0c;系统的关键就是“实时通信”能力。所谓实时通信有以下两层含义 客户端可以主动向服务端发送信息。 当服务端内容发生变化时&#xff0c;服务端可以实时通知客户端。 HTTP局限 Http是客户端/服务器模式中…

高可用系统的设计原则

降级 在软件开发和系统设计中&#xff0c;降级&#xff08;Degradation&#xff09;是一种应对系统压力或异常情况的策略&#xff0c;旨在保持系统的核心功能运行&#xff0c;即使这可能意味着临时牺牲一些非关键功能。降级模式通常分为主动降级和被动降级两种类型&#xff1a…

免费分享:1901-2020全球气候数据集(附下载办法)

长期的全球其后数据不仅能够揭示长期的气候趋势&#xff0c;还为农业、水资源管理、公共卫生等多个领域的决策提供科学依据&#xff0c;对于推动可持续发展具有重要意义。 数据集简介 CRU TS&#xff08;Climatic Research Unit gridded Time Series&#xff09;数据集&#…

【Kafka】SpringBoot整合Kafka详细介绍及代码示例

Kafka介绍 Apache Kafka是一个分布式流处理平台。它最初由LinkedIn开发&#xff0c;后来成为Apache软件基金会的一部分&#xff0c;并在开源社区中得到了广泛应用。Kafka的核心概念包括Producer、Consumer、Broker、Topic、Partition和Offset。 Producer&#xff1a;生产者&a…

车载android开发 carservice(一)

车载android开发 carservice是什么? 车载Android开发中的CarService是一个专门为汽车环境设计的系统服务。CarService通常是Android Automotive OS的一部分,提供一系列API和框架,允许开发人员构建与汽车相关的应用和服务。 以下是CarService的一些主要功能和作用: 车辆数…

宽睿数字平台兼容TDengine 等多种数据库,提供行情解决方案

小T导读&#xff1a;最近&#xff0c;涛思数据与宽睿金融宣布了一项重要合作。在此之前&#xff0c;宽睿金融对 TDengine 进行了性能测试&#xff0c;并根据测试报告的结果&#xff0c;决定将 TDengine 接入宽睿数字平台&#xff0c;以提升高密度行情处理效率。本文将详细介绍此…

百元开放式耳机性价比推荐,全网5款爆火产品实测!

耳机作为我们日常生活中不可或缺的一部分&#xff0c;它的性能、配置及形态也在不停的优化。目前开放式耳机是耳机中最为热门的一款产品&#xff0c;以其不入耳的的设计迅速占领耳机市场&#xff0c;最主要是因为自身佩戴的舒适度有大幅度提升。人们更加注重生活的质量&#xf…

Apollo9.0 PNC源码学习之Control模块(五)—— 基于LQR的横向控制

前面文章&#xff1a; Apollo9.0 PNC源码学习之Control模块&#xff08;一&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;二&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;三&#xff09; Apollo9.0 PNC源码学习之Control模块&#xff08;四&…

通信原理抽样定理和PAM调制解调硬件实验

一、实验目的 1. 加深理解抽样定理&#xff1b; 2. 加深理解脉冲幅度调制的原理。 二、实验内容 1. 观测PAM平顶抽样波形&#xff1b; 2. 观测PAM自然抽样波形及解码后波形。 三、实验器材 1. 双踪示波器&#xff1b; 2. 通信原理实验箱信号源模块、①号模块。 四、实…

Stable Diffusion学习指南【图生图篇】

一、图生图功能初识 1.1 传统意义上的喂参考图 我们都知道&#xff0c;模型在运算时是根据我们提供的提示内容来确定绘图方向&#xff0c;如果没有提示信息&#xff0c;模型只能根据此前的学习经验来自行发挥。在之前的文生图篇&#xff0c;我们介绍了如何通过提示词来控制图…

Centos系统yum安装mysql数据库

安装之前需要将系统自带的mariadb-libs软件包删除。 检查是否存在mariadb-libs包。 yum list installed|grep mariadb-libs 删除mariadb-libs包 yum -y remove mariadb-libs 声明&#xff1a; 系统&#xff1a;CentOS-7-x86_64-DVD-2009 安装为最小化安装&#xff0c;没…

在IDEA中连接数据库

1.点击侧边栏的Database 2.选中你要连接的数据库类型 3.输入用户名、密码&#xff0c;测试连接&#xff0c;没有驱动的话先下载下驱动 4.发现没有数据库&#xff0c;点击1 of 14&#xff0c;选择All schemas&#xff0c;即可显示全部数据库 5.执行sql 如果对您有帮助的话记…

【ASE】笔记总结

这里写自定义目录标题 ASE 介绍ASE 的安装文件格式的转化命令行操作图形界面操作Python代码操作[2]支持的文件转化格式 ASE&#xff08;三&#xff09;&#xff1a;图形界面查看/建立/修改结构图形界面召唤查看结构 python代码查看/建立结构读写、查看结构建立结构分子 周期性体…

深入浅出MyBatis:全面解析与实战指南

MyBatis 是一个优秀的持久层框架&#xff0c;它简化了 Java 应用与关系数据库之间的映射。对于大多数 Java 开发者而言&#xff0c;掌握 MyBatis 是必不可少的一部分。本文将详细介绍 MyBatis 的各个方面&#xff0c;包括其基本原理、配置、操作、动态 SQL、插件机制和高级应用…

新创作活动,The Sandbox 宣布第二届 “创作者挑战”!

是时候展示你的实力了&#xff01; 继首届 “创作者挑战” 成功举办之后&#xff0c;The Sandbox 很高兴推出第二届 "创作者挑战"&#xff0c;邀请创作者再次释放他们的创造力和创业精神。本次活动从 2024 年 6 月 24 日开始至 8 月 26 日结束&#xff0c;为期 10 …

Ant-design-vue开源项目介绍、应用场景、组件有哪些

文章目录 一、Ant-design-vue项目介绍二、Ant-design-vue项目特点三、Ant-design-vue应用场景四、Ant-design-vue有哪些组件五、Ant-design-vue案例代码1. 后台管理系统登录页面的例子2. Table组件使用案例 开源项目地址 一、Ant-design-vue项目介绍 Ant-design-vue 是一个基于…

第104天: 权限提升-Linux 系统环境变量定时任务权限配置不当MDUT 自动化

目录 案例一&#xff1a;Linux-环境变量文件配合 SUID-本地 案例二&#xff1a;Linux-定时任务打包配合 SUID-本地 案例三&#xff1a;Linux-定时任务文件权限配置不当-WEB&本地 案例四&#xff1a;Linux-第三方软件 MYSQL 数据库提权-WEB&本地 隧道出网 手工提权…

Science Online《科学周刊》文献在家如何查找下载

今天有位同学自己学校没有Science《科学》数据库&#xff0c;求助几篇该数据库文献&#xff0c;小编就把自己在家下载文献的方法分享给了这位同学&#xff0c;同时也分享给其他有需要文献下载但找不到资源的朋友。本文以下载Science《科学》文献为例来演示一下在家获取文献的过…

STM32开发遇到问题解决2024.6.14

1、电路板打样出问题 电路板样品回来&#xff0c;做了接线&#xff0c;连接上后&#xff0c;可以下载程序&#xff0c;上电测试&#xff0c;有画面&#xff0c;但是上电不到一分钟&#xff0c;电池电量突增&#xff0c;串口屏开始闪烁&#xff0c;3.3V指示灯闪烁&#xff0c;赶…