当前位置: 首页 > 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"…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...