vue elementUI 高德地图接口实现省市区街道四级联动

news/2024/7/10 1:33:24 标签: vue, javascript, vue.js, html
htmledit_views">

先看看效果图:

这里我使用的是直接get方式去高德去接口数据的方式,所以不需要在html" title=vue>vue安装任何东西。

这里不要使用代理跨域,直接把高德地址放上去就行了,key是高德注册的key,后面的参数是用来传递subdistrict(显示的级数)keywords(按地区名称查询)。

HTML这一块需要注意的事街道这里的可以,因为高德街道这一块的adcode是重复的,所以这里不能讲adcode设置为key了,不然会报错key值重复。

data中定义变量:

初始化省数据:

监听省的下拉框:

注释掉的部分是使用一次性获取四级的数据,但是由于浏览器获取数据量过大而导致超时的问题,所以就不推荐直接取到4级了,如果你是要做三级联动,可以用注释掉的代码,会更加简单一点不需要频繁调用接口。

市数据:

区数据和街道(街道不需要监听了):

然后就OK了!!!!!!!!!!!


http://www.niftyadmin.cn/n/825462.html

相关文章

解决vue引入组件报错,和调用组件步骤及封装步骤

这里调用了组件然后报错Unknown custom element: <myAddress> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 讲的是调用<myAddress>组件找不到&#xff0c;那么就是我引入组件的地…

div从上到下从左到右自动换行显示排列

先看效果图&#xff1a; .box{//外部的div盒子 display: flex;//先设置div里的内容显示同一行 justify-content: flex-start;//左右布局 flex-wrap: wrap;//换行 align-content: flex-start;//紧揍排列 } .child1 ,.child2{//div里的内容块 width: 100px; height: …

DatePicker日期限制时间段

1.只能选择当前及以后的日期 <el-date-pickerv-model"value1"type"date":picker-options"pickerOptions"> </el-date-picker>data() {return {pickerOptions: {disabledDate(time) {return time.getTime() < Date.now() - 8.64e7…

地铁框架保护的原理_“开往春天的地铁”需要更多宽容与理解

1月1日,历时三年多的建设,济南轨道交通R1号线正式开通试运行,结束了济南没有地铁的历史,这趟被称为“开往春天的地铁”承载了泉城市民多年的期盼与等待,然而开通后却也遭到了一些戏谑与嘲讽。“第一条从郊区开往郊区的地铁”“成功避开城区所有核心区域与繁华路段”“大批市民开…

hadoop合并日志_hadoop面试题!这6个!经常问!

您是否很快准备接受面试并需要了解Hadoop&#xff1f;不要惊慌&#xff01;以下是您有可能会被问到的一些问题以及我为您提供的答案。 希望对你有帮助哦&#xff01; 正 文 来 啦 问题一&#xff1a;什么是Hadoop&#xff1f;Hadoop是一个开源软件框架&#xff0c;用…

element输入框限制内容为整数

οninput"valuevalue.replace(/[^\d]/g,)"

异步导致奇奇怪怪的问题

最近遇到了一个很奇怪的bug,点击下载的图片与名称顺序被打乱了 经过调试排查&#xff0c;发现在这个功能所用到的打包工具&#xff0c;打包是需要一定时间&#xff0c;同时它并没有回调&#xff0c;导致异步执行了&#xff0c;使得顺序被打乱 然后我就是使用了延迟处理的方法让…

vue的form表单输入框输入不了内容

是因为你可能在赋值之前给被赋值的对象转换了数据&#xff0c;得给赋值得对象转换数据然后赋值给被赋值的对象就行了