高德地图点击搜索触发输入提示

news2024/11/16 9:21:59

减少调用次数,不用每输入一次调用一次,输入完后再触发搜索
效果图:
在这里插入图片描述

![Alt](https://img-home.csdnimg.cn/images/20220524100510.png
dom结构

<div class="seach">
    <van-search
        show-action
        v-model="addressVal"
        placeholder="请输入地址搜索"
    >
        <template #action>
            <div @click="iptchange">搜索</div>
        </template>
    </van-search>
    <input
        style="display: none;"
        class="ipt"
        id="tipinput"
        placeholder="请输入地址搜索"
    />
</div>

事件

autoOptions() {
    var autoOptions = {
        input: 'tipinput'
    }
    var that = this
    window.AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var auto = new window.AMap.AutoComplete(autoOptions)
        auto.on('select', that.selectSite) // 注册监听,当选中某条记录时会触发
    })
    // 搜索框自动完成类
    this.auto = new window.AMap.AutoComplete({
        input: 'tipinput' // 使用联想输入的input的id
    })
    // 构造地点查询类
    this.placeSearch = new window.AMap.PlaceSearch({
        map: this.map
    })
    // 当选中某条搜索记录时触发
    this.auto.on('select', this.selectSite)
},
iptchange() {
	 var tipinput = document.getElementById('tipinput')
	 tipinput.value = this.addressVal
	 var event = new InputEvent('input')
	 tipinput.dispatchEvent(event)
	 this.autoOptions()
},

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

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

相关文章

docker和docker-compose生产的容器,不在同一个网段,解决方式

在实际项目中&#xff0c;使用docker run xxXx 和docker-compose up -d 不在同一个网段&#xff0c;一个是默认是172.17.x.x, 另一个是172.19.x.x。为解决这个问题需要自定义一个网络&#xff0c;我命名为“my-bridge” 首先熟悉几条命令&#xff1a; docker network ls 或…

构建和应用卡尔曼滤波器 (KF)--扩展卡尔曼滤波器 (EKF)

作为一名数据科学家&#xff0c;我们偶尔会遇到需要对趋势进行建模以预测未来值的情况。虽然人们倾向于关注基于统计或机器学习的算法&#xff0c;但我在这里提出一个不同的选择&#xff1a;卡尔曼滤波器&#xff08;KF&#xff09;。 1960 年代初期&#xff0c;Rudolf E. Kal…

学生党的福利!移动云重磅升级存储产品体系

如今&#xff0c;随着科学技术不断发展进步&#xff0c;电子产品的生产技术也变得越来越成熟。一方面&#xff0c;电子产品的功能越来越强大&#xff0c;质量越来越可靠&#xff1b;另一方面&#xff0c;产品价格越来越便宜&#xff0c;在人们生活中越来越普及。大学生群体可以…

解决ubuntu23.10 wifi不能使用的问题

解决ubuntu23.10 wifi不能使用的问题 今天升级到了ubuntu23.10之后&#xff0c;wifi不能使用。 参考此视频解决了问题&#xff1a; https://www.youtube.com/watch?appdesktop&vn92O8rNKVb0 sudo lshw -class networkcd /etc/pm/sleep.dlssudo touch configsudo gedit co…

HelpLook VS Zendesk:哪种知识库软件更适合您的业务

为任何组织创造一个开放且协作的环境至关重要。然而&#xff0c;高水平的员工每周可能会花费多达30个小时处理电子邮件和协作&#xff0c;对他们的工作效率产生了重大影响。 为了解决这个挑战&#xff0c;建立一种高效的信息共享方法至关重要&#xff0c;不会妨碍团队的生产力…

WinEdt 11.1编辑器的尝鲜体验

WinEdt 11.1编辑器的尝鲜体验 2023年5月19日&#xff0c;WinEdt 11.1版本发布了&#xff0c;相比WinEdt 10.3, 最新版更加漂亮&#xff0c;更加友好&#xff0c;更加好用了&#xff01; 最大的改变是WinEdt 11.1 有了自带的WinEdtPDF阅读器&#xff0c;所以不再需要下载第三方…

解决开着代理情况下pip或魔搭下载失败

解决开着代理情况下pip或魔搭下载失败 一、前言 最近由于经常配环境导致&#xff0c;老是要来回切clash关掉代理&#xff0c;非常的不方便 如下面的&#xff0c;魔搭模型下载失败 ValueError: invalid model repo path HTTPSConnectionPool(host‘www.modelscope.cn’, port4…

深度学习之基于YoloV5抽烟检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于YOLOv5&#xff08;You Only Look Once&#xff09;的抽烟检测系统可以用于实时检测图像或视频中是否存在抽烟行…

【Linux学习笔记】基础IO

这里写目录标题 1. 系统文件I/O1.1. 接口介绍1.2. 库函数接口与系统接口的关系 2. 文件描述符fd2.1. 0&1&2文件描述符2.2. 文件描述符的分配规则2.3. 重定向2.4. 重定向系统调用2.5. 进程独立性 3. Linux下一切皆文件4. 缓冲区4.1. 缓冲区的理解4.2. 缓冲区的位置 5. 理…

【通俗易懂】git原理、安装及连接gitlab,github

目录 一、GIT原理【这部分也挺简单&#xff0c;可以看看&#xff0c;如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…

找不到vcruntime140_1.dll,无法继续执行代码怎么办?5个可以解决的方案分享

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“VCRuntime140_1.dll缺失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;我们需要进行修复操作。本文将介绍5个修复VCRuntime140_1.dll缺失的方法&#xff…

C语言--判断年月日是否合理

一.题目描述 比如输入2001&#xff0c;2&#xff0c;29&#xff0c;输出&#xff1a; 不合理 。因为平年的二月只有28天 比如输入2000&#xff0c;6&#xff0c;31&#xff0c;输出&#xff1a;不合理。因为6月是小月&#xff0c;只有30天。 二.思路分析 本题主要注意两个问…

物联网AI MicroPython学习之语法 ADC数模模块

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; ADC 介绍 模块功能: ADC数模转换模块 ADC功能在ESP32引脚32-39上可用&#xff0c;使用默认配置时&#xff0c;ADC引脚上的输入电压必须介于0.0v和1.0v之间&#xff08;任何高于1.0v的值都将读为4095&#x…

Linux中Team链路聚合配置

目录 一、Team介绍 二、网卡的bonding和Teaming技术 三、Teaming常用工作模式 四、实验环境 五、添加物理网卡 1、给虚拟机新增四张物理网卡 2、查看网卡信息 六、Team链路聚合配置 1、创建team0的网络接口 2、为team0设置静态IP,掩码位&#xff0c;网关&#xff0c;dns…

Bandzip下载(好用的解压缩工具)

1.下载链接&#xff1a;Bandizip - Download Bandizip 6.x 2.点击 下载Bandzip 进行下载&#xff0c;下载到本地&#xff0c;直接安装即可

坑惨啦!!!——符号冲突案例分析

背景 前段时间在北汽项目中&#xff0c;遇到了一个奇怪现象&#xff1a;程序启动之后&#xff0c;偶现运行一段时间后&#xff0c;crash&#xff0c;复现频率较高。困扰了大家较长时间。最终在和同事的不懈努力下&#xff0c;找到的根因&#xff0c;并找到了解决方法。过程中也…

Spring-IOC-@Value和@PropertySource用法

1、Book.java PropertySource(value"classpath:配置文件地址") 替代 <context:property-placeholder location"配置文件地址"/> Value("${book.bid}") Value("${book.bname}") Value("${book.price}") <bean id&…

[羊城杯2020]easyphp .htaccess的利用

[CTF].htaccess的使用技巧总结 例题讲解 掌握知识&#xff1a; 测试发现是阿帕奇服务器&#xff0c;就想到上传文件利用.htaccess配置文件执行jpg文件中的php代码&#xff0c;但是再进行第二次文件写入时会把之前的文件删除掉&#xff0c;所以不能上传两次来利用&#xff0c…

webpack项目 index.html 根据不同的变量引入不同的js

项目 webpack搭建 问题&#xff1a;在入口文件index.html中根据不同的变量引入不同的js 使用插件HtmlWebpackPlugin HtmlWebpackPlugin 项目里用来生成静态文件的 这个插件每个项目基本都要用到的&#xff0c;只要全局搜一下位置 根据配置文件的指令找到执行的文件&#xff0…

openGauss学习笔记-129 openGauss 数据库管理-参数设置-查看参数值

文章目录 openGauss学习笔记-129 openGauss 数据库管理-参数设置-查看参数值129.1 操作步骤129.2 示例 openGauss学习笔记-129 openGauss 数据库管理-参数设置-查看参数值 openGauss安装后&#xff0c;有一套默认的运行参数&#xff0c;为了使openGauss与业务的配合度更高&…