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

MacBook Pro本地部署OpenClaw:百川2-13B量化模型7×24小时运行方案

MacBook Pro本地部署OpenClaw&#xff1a;百川2-13B量化模型724小时运行方案 1. 为什么选择MacBook Pro部署OpenClaw&#xff1f; 去年冬天&#xff0c;当我第一次尝试在MacBook Pro上部署量化版百川2-13B模型时&#xff0c;身边的朋友都觉得我疯了。"M1芯片能跑得动13B…...

为什么你的STM32F103工程编译失败?可能是启动文件没选对!

为什么你的STM32F103工程编译失败&#xff1f;可能是启动文件没选对&#xff01; 在嵌入式开发领域&#xff0c;STM32系列微控制器因其出色的性能和丰富的外设资源而广受欢迎。然而&#xff0c;即使是经验丰富的开发者&#xff0c;在STM32F103项目开发过程中也难免会遇到各种编…...

Qwen2.5-VL-7B-Instruct应用场景:法律合同关键条款图文定位与摘要生成

Qwen2.5-VL-7B-Instruct应用场景&#xff1a;法律合同关键条款图文定位与摘要生成 想象一下&#xff0c;你是一位法务人员或商务经理&#xff0c;面前摆着一份几十页、图文并茂的复杂合同。你需要快速找到关于“违约责任”、“付款条件”或“知识产权归属”的关键条款。传统的…...

建议收藏|降AIGC工具深度测评与2026年最好用推荐

2026年真正好用的AI论文降重与改写工具&#xff0c;核心看降重效果、去AI味、格式保留、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...

OpenClaw成本优化方案:ollama GLM-4-7-Flash替代OpenAI API实测

OpenClaw成本优化方案&#xff1a;ollama GLM-4-7-Flash替代OpenAI API实测 1. 为什么需要寻找OpenAI API的替代方案 去年我开始在个人项目中使用OpenClaw实现自动化办公流程时&#xff0c;很快被OpenAI API的token消耗速度震惊了。一个简单的"读取邮件附件-解析内容-生…...

Meixiong Niannian与SpringBoot微服务架构

Meixiong Niannian与SpringBoot微服务架构 1. 引言 在当今快速发展的AI应用领域&#xff0c;如何将强大的画图引擎无缝集成到企业级系统中是一个关键挑战。Meixiong Niannian作为一款高性能的AI画图引擎&#xff0c;能够生成高质量的图像内容&#xff0c;而SpringBoot微服务架…...

nli-distilroberta-base在工业质检文档中的应用:SOP操作步骤与现场记录逻辑一致性核查

nli-distilroberta-base在工业质检文档中的应用&#xff1a;SOP操作步骤与现场记录逻辑一致性核查 1. 项目背景与价值 在工业制造领域&#xff0c;标准作业程序(SOP)与现场操作记录的一致性核查是质量管理的核心环节。传统人工核查方式存在效率低、主观性强、覆盖不全等问题。…...

在对话中处理生物特征(指纹、虹膜)时,OpenClaw 的识别精度?

关于OpenClaw在生物特征识别上的精度&#xff0c;其实很难给出一个绝对的数字。这倒不是因为技术本身有什么神秘之处&#xff0c;而是因为精度这个指标&#xff0c;在实际应用中常常被误解了。 很多人一提到识别精度&#xff0c;脑子里立刻会冒出一个百分比&#xff0c;比如99.…...

选吉他不踩坑:合板、单板、全单材质深度解析,新手看懂这篇就够

对于新手来说&#xff0c;挑选吉他时最容易被“合板”“单板”“全单”这些专业术语绕晕。其实&#xff0c;这三者的核心区别在于木材的构成方式&#xff0c;而木材直接决定了吉他的音色、手感以及使用寿命。今天我们就抛开品牌干扰&#xff0c;纯科普这三种材质的底层逻辑&…...

CANoe实战:手把手教你用J1939.dbc发送超8字节长帧报文(附完整CAPL代码)

CANoe实战&#xff1a;J1939长帧报文分包发送全解析与CAPL代码优化 在汽车电子开发领域&#xff0c;J1939协议作为商用车通信标准&#xff0c;其长帧报文处理一直是工程师面临的典型挑战。当数据长度超过CAN总线单帧8字节限制时&#xff0c;如何高效实现分包传输&#xff1f;本…...