当前位置: 首页 > news >正文

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

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

文章目录

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

最终效果:

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

一、准备工作

高德API平台申请自己的key,申请的类型为Web服务
在这里插入图片描述

二、完整页面代码

主要实现在于 通过发送高德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>

相关文章:

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

省市县选择如果自己实现是比较麻烦的&#xff0c;最近发现可以使用高德实现省市县联动选择&#xff0c;实现后来记录一下供大家参考。 文章目录 最终效果&#xff1a;一、准备工作二、完整页面代码 最终效果&#xff1a; 实现单次点击获取省市县名称&#xff0c;选择完成后返回…...

【数据结构(邓俊辉)学习笔记】图06——最小支撑树

文章目录 0. 概述1. 支撑树2. 最小支撑树3. 歧义性4. 蛮力算法5. Prim算法5.1 割与极短跨越边5.2 贪心迭代5.3 实例5.4 实现5.5 复杂度 0. 概述 学习下最小支撑树和prim算法。 1. 支撑树 最小的连通图是树。 连通图G的某一无环连通子图T若覆盖G中所有的顶点&#xff0c;则称…...

海豚调度清理:使用 API 轻松清理历史工作流实例以及日志文件

&#x1f4a1; 本系列文章是 DolphinScheduler 由浅入深的教程&#xff0c;涵盖搭建、二开迭代、核心原理解读、运维和管理等一系列内容。适用于想对 DolphinScheduler了解或想要加深理解的读者。 祝开卷有益。 大数据学习指南 大家好&#xff0c;我是小陶&#xff0c;DolphinS…...

python怎么显示行号

我们如果想让Python IDLE显示行号&#xff0c;我们可以通过扩展IDLE功能来做到。 1.我们需要下载一个LineNumber.py扩展。 2.我们打开Python安装目录&#xff0c;找到安装目录下的Lib\idlelib目录&#xff0c;复制LineNumber到这个目录。 3.然后启动扩展。 4.配置扩展的方式…...

pytorch中,load_state_dict和torch.load的区别?

在 PyTorch 中&#xff0c;load_state_dict 和 torch.load 是两个不同的函数&#xff0c;用于不同的目的。 torch.load: 用途: 从磁盘加载一个保存的对象。这个对象可以是一个模型的整个状态字典&#xff08;包含模型参数&#xff09;、优化器状态字典、甚至是任意其他 Python …...

ObjectARX打印当前图纸为PDF,无延迟(亲测有效)

CAD二次开发定制ObjectARX安装配置AutoCAD插件ZWCAD插件C++ //----------------------------------------------------------------------------- //----- acrxEntryPoint.cpp //----------------------------------------------------------------------------- #include &quo…...

torch.squeeze() dim=1 dim=-1 dim=2

对数据的维度进行压缩 使用方式&#xff1a;torch.squeeze(input, dimNone, outNone) 将输入张量形状中的1 去除并返回。 如果输入是形如(A1B1C1D)&#xff0c;那么输出形状就为&#xff1a; (ABCD) import torch x torch.rand(2, 1, 1, 3, 1, 4) print(x) print(x.shape) …...

智慧环保一体化平台简介

据悉&#xff0c;环保问题日益受到人们的关注&#xff0c;智慧环保一体化平台作为解决环保问题的有力工具&#xff0c;正逐渐走进人们的视野。朗观视觉智慧环保一体化平台通过整合各类环保资源&#xff0c;实现环境数据的实时监测、分析与管理&#xff0c;为环境保护提供智能化…...

idea在空工程中添加新模块并测试的步骤

ServicesTest是空的工程&#xff0c;没有pom文件。现在需要在ServicesTest目录下添加新模块作为新的工程&#xff0c;目的是写一下别的技术功能。 原先目录结构&#xff0c;ServicesTest是空的工程&#xff0c;没有pom文件。下面的几个模块是新的工程&#xff0c;相互独立。 1.…...

HCIE-QOS基本原理

QOS基本原理 QOS概述什么是QOSQoS服务模型区分服务模型QoS常用技术 (DiffServ模型)QoS数据处理流程 (DiffServ模型) QoS流分类和流标记QoS数据处理流程为什么需要流分类和流标记 简单流分类外部优先级 - VLAN报文外部优先级 - MPLS报文外部优先级 - IP报文各外部优先级间的对应…...

pycharm基本使用(常用快捷键)

0.下载 pycharm官网下载 选择合适的版本&#xff0c;本文以2024.1为例 1.简单应用 常用快捷键 ctrlD 复制当前行 ctrlY 删除当前行 ctrlX 剪切当前行&#xff08;可用作删除&#xff0c;更顺手&#xff09; shift↑ 选中多行ctrlshiftF10 运行 shiftF9 调试ctrl/ 注释当前…...

机器学习--回归模型和分类模型常用损失函数总结(详细)

文章目录 引言 回归模型常用损失函数均方误差&#xff08;Mean Squared Error, MSE&#xff09;均方根误差&#xff08;Root Mean Squared Error, RMSE&#xff09;平均绝对误差&#xff08;Mean Absolute Error, MAE&#xff09;Huber损失&#xff08;Huber Loss&#xff09; …...

企业选择数字工厂管理系统供应商的标准是什么

随着信息技术的飞速发展&#xff0c;数字化转型已成为企业提升竞争力、实现可持续发展的必由之路。在制造业领域&#xff0c;数字工厂管理系统实现生产流程自动化、智能化的关键工具&#xff0c;其选择的重要性不言而喻。本文将从多个维度探讨企业选择数字工厂管理系统供应商的…...

京准电钟|基于纳秒级的GPS北斗卫星授时服务器

京准电钟&#xff5c;基于纳秒级的GPS北斗卫星授时服务器 京准电钟&#xff5c;基于纳秒级的GPS北斗卫星授时服务器 你有没有思考过这样一个问题&#xff1a;火车站内&#xff0c;熙熙攘攘&#xff0c;旅客排队进站、列车停靠发车&#xff0c;一切井然有序。一旦有个别时间出现…...

Flutter知识点

Dart语言基础知识 Dart特性&#xff1a; Dart 是少数同时支持 JIT&#xff08;Just In Time&#xff0c;即时编译&#xff09;和 AOT&#xff08;Ahead of Time&#xff0c;运行前编译&#xff09;的语言之一。语言在运行之前通常都需要编译&#xff0c;JIT 和 AOT 则是最常见…...

2024-06-12 问AI: 在大语言模型中,什么是Jailbreak漏洞?

文心一言 在大语言模型中&#xff0c;Jailbreak漏洞&#xff08;也称为越狱攻击或指令注入攻击&#xff09;是一种特定的安全漏洞&#xff0c;它允许用户或攻击者通过精心设计的输入或指令&#xff0c;绕过模型的安全限制&#xff0c;诱导模型产生原本被设定为禁止或限制的输出…...

Vue22-v-model收集表单数据

一、效果图 二、代码 2-1、HTML代码 2-2、vue代码 1、v-model单选框的收集信息 v-model&#xff1a;默认收集的就是元素中的value值。 单选框添加默认值&#xff1a; 2、v-model多选框的收集信息 ①、多个选择的多选 注意&#xff1a; 此处的hobby要是数组&#xff01;&…...

【深度学习】深入解码:提升NLP生成文本的策略与参数详解

文章目录 解码策略解码参数公式解释代码例子区别 更详细的束搜索的解释更详细的例子解释第一步第二步第三步 解码策略和解码参数在自然语言处理&#xff08;NLP&#xff09;模型的生成过程中起着不同的作用&#xff0c;但它们共同决定了生成文本的质量和特性。 解码策略 解码…...

Petalinux由于网络原因产生的编译错误(2)--Fetcher failure:Unable to find file

1 Fetcher failure:Unable to find file 错误 如果编译工程遇到如下图所示的“Fetcher failure for URL”或相似错误 出现这种错误的原因是 Petalinux 在配置和编译的时候&#xff0c;需要联网下载一些文件&#xff0c;由于网 络原因这些文件不能正常下载&#xff0c;导致编译…...

随手记:商品信息过多,展开收起功能

UI原型图&#xff1a; 页面思路&#xff1a; 在商品信息最小item外面有一个包裹所有item的标签&#xff0c;控制这个标签的高度来实现展开收起功能 <!-- 药品信息 --><view class"drugs" v-if"inquiryInfoSubmitBtn"><view class"…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...