vue项目中为高德地图信息窗体添加点击事件踩坑

news2024/12/23 13:49:47

这里遇到了一个坑,在给信息窗体中的内容添加点击事件时,信息窗体弹出的时候点击事件自动执行了。在此记录一下踩坑和解决过程。
在这里插入图片描述

部分代码如下:

this.map.on('click', e => {
	const item = {
		val: 1234,
		name: 'zhang'
	}
	const content =`<li οnclick='Boxjump()' style='color:blue;text-align:right;text-decoration: underline;'><a>详情</a></li>  `
	window.Boxjump = () => {
        this.Boxjump(item.userNumber);
    };
	let infoWindow = new AMap.InfoWindow({
        // isCustom: true, //使用自定义窗体
        content,
        offset: new AMap.Pixel(x, y),
        autoMove: true, //是否自动调整窗口到视野内
        closeWhenClickMap: true, // 点击地图是否关闭信息窗体
        showShadow: true //是否显示信息窗体阴影
      });
    infoWindow.open(this.map, coordinate);
}

Boxjump(val){
	console.log(val)
}

坑1
在这里插入图片描述

坑2
在这里插入图片描述
解决方案
在这里插入图片描述
原因这是因为你的弹窗内容是以字符串的形式插入到 DOM 中的。此时你给它添加的点击事件不会被 Vue 的事件监听系统所识别和处理,因为这是在 Vue 的作用范围之外的。但是,如果你把这个函数挂载到 window 对象上,那么无论在哪个地方调用这个函数,浏览器都能找到并且执行它。

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

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

相关文章

快解析内网穿透帮我实现零成本自建网站

我是一名 90后&#xff0c;大概就是大家嘴里“别人家的孩子”&#xff0c;大学学的是IT专业&#xff0c;毕业后结婚、生子一切按部就班 。随波逐流工作了几年&#xff0c;父母年龄变大&#xff0c;培养孩子投入也增加&#xff0c;逐渐开销变大&#xff0c;可是我的薪资还处于中…

【设计模式】详解观察者模式

文章目录 1、简介2、观察者模式简单实现抽象主题&#xff08;Subject&#xff09;具体主题&#xff08;ConcreteSubject&#xff09;抽象观察者&#xff08;Observer&#xff09;具体观察者&#xff08;ConcrereObserver&#xff09;测试&#xff1a; 观察者设计模式优缺点观察…

使用serverless实现从oss下载文件并压缩

公司之前开发一个网盘系统, 可以上传文件, 打包压缩下载文件, 但是在处理大文件的时候, 服务器遇到了性能问题, 主要是这个项目是单机部署.......(离谱), 然后带宽只有100M, 现在用户比之前多很多, 然后所有人的压缩下载请求都给到这一台服务器了, 比如多个人下载的时候带宽问…

springboot解决跨域

跨域问题指的是不同站点之间&#xff0c;使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制&#xff0c;它的初衷是为了保证用户的安全&#xff0c;防止恶意网站窃取数据。但这个保护机制也带来了新的问题&#xff0c;它的问题是给不同站点之间的正常调用&…

“单片机定时器:灵活计时与创新功能的关键“

学会定时器的使用对单片机来说非常重要&#xff0c;因为它可以帮助实现各种时序电路。时序电路在工业和家用电器的控制中有广泛的应用。 举个例子&#xff0c;我们可以利用单片机实现一个具有按钮控制的楼道灯开关。当按钮按下一次后&#xff0c;灯会亮起并持续3分钟&#xff…

Android 中 app freezer 原理详解(一):R 版本

基于版本&#xff1a;Android R 0. 前言 在之前的两篇博文《Android 中app内存回收优化(一)》和 《Android 中app内存回收优化(二)》中详细剖析了 Android 中 app 内存优化的流程。这个机制的管理通过 CachedAppOptimizer 类管理&#xff0c;为什么叫这个名字&#xff0c;而不…

第五章:linux进程控制

系列文章目录 文章目录 系列文章目录前言进程创建fork函数初识fork写时拷贝fork常规用法fork调用失败的原因 进程终止进程退出场景进程的退出码系统自带的退出码strerrorC语言提供的退出码 进程退出深度理解进程常见退出方法正常退出缓冲区 进程等待进程等待必要性进程等待的方…

SAP中获取成品物料的全部配置(SAP配置BOM攻略四)

基于系统内的全配置BOM设定&#xff0c;全部的子配置是由四大配置产生&#xff08;即车身颜色、内饰颜色、车型、选装&#xff09;。如果按某一车型&#xff0c;要带出该车的全部BOM子物料&#xff0c;首先需要具备通过四大配置&#xff0c;得到全部子配置的能力&#xff0c;然…

【iVX】在百花齐放的低代码平台中独领风骚

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后端的开发语言A…

IntelliJ IDEA 2023.2 新版本,拥抱 AI

IntelliJ IDEA 近期连续发布多个EAP版本&#xff0c;官方在对用户体验不断优化的同时&#xff0c;也新增了一些不错的功能&#xff0c;尤其是人工智能助手补充&#xff0c;AI Assistant&#xff0c;相信在后续IDEA使用中&#xff0c;会对开发者工作效率带来不错的提升。 以下是…

mybatisPlus入门篇

文章目录 初窥门径1.1 初识MybatisPlus1.2 MybatisPlus的特性1.3 MybatisPlus的架构模型 入门案例2.1 准备相关开发环境2.2 搭建springboot工程2.3 创建数据库2.4 引入相关依赖2.5 创建实体类2.6 集成MybatisPlus2.7 单元测试2.8 springboot日志优化 初窥门径 1.1 初识Mybatis…

Rust之包、单元包及模块

包&#xff1a;一个用于构建、测试并分享单元包的Cargo功能&#xff1b;单元包&#xff1a;一个用于生成库或可执行文件的树形模块结构&#xff1b;模块及use关键字&#xff1a;被用于控制文件结构、作用域及路径的私有性&#xff1b;路径&#xff1a;一种用于命名条目的方法&a…

Windows之XSshell7运行程序找不到mfc140u.dll解决方案

Xshell7依赖C库如下&#xff0c;下载如下2个x86&#xff08;32位&#xff09;运行库安装即可使用。 官网地址&#xff1a;《C运行库》

城市之星中山TOP3

城市之星中山TOP3 不断努力&#xff0c;突破自己。

《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解

1.简介 按照从上往下&#xff0c;从左往右的计划&#xff0c;今天就轮到介绍和分享Fiddler的监控面板了。监控面板主要是一些辅助标签工具栏。有了这些就会让你的会话请求和响应时刻处监控中毫无隐私可言。监控面板是fiddler最核心的功能之一。记录了来自于服务器端&#xff0…

机器学习深度学习——softmax回归从零开始实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——向量求导问题 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 …

39. Linux系统下在Qt5.9.9中搭建Android开发环境

1. 说明 QT版本:5.9.9 电脑系统:Linux JDK版本:openjdk-8-jdk SDK版本:r24.4.1 NDK版本:android-ndk-r14b 效果展示: 2. 具体步骤 大致安装的步骤如下:①安装Qt5.9.9,②安装jdk,③安装ndk,④安装sdk,⑤在qt中配置前面安装的环境路径 2.1 安装Qt5.9.9 首先下载…

国产化的接口测试、接口自动化测试工具Apipost的介绍及使用

Apipost介绍&#xff1a; Apipost是 API 文档、API 调试、API Mock、API 自动化测试一体化的研发协作赋能平台&#xff0c;它的定位 Postman Swagger Mock JMeter。 Apipost 是接口管理、开发、测试全流程集成工具&#xff0c;能支撑整个研发技术团队同平台工作&#xff0…

win10日程怎么同步到安卓手机?电脑日程同步到手机方法

在如今快节奏的生活中&#xff0c;高效地管理时间变得至关重要。而对于那些经常在电脑上安排日程的人来说&#xff0c;将这些重要的事务同步到手机上成为了一个迫切的需求。因为目前国内使用win10系统电脑、安卓手机的用户较多&#xff0c;所以越来越多的职场人士想要知道&…

手机怎么把word转换成pdf?这几种方法超简单

手机怎么把word转换成pdf&#xff1f;现在很多人在手机上处理文档&#xff0c;但是可能会遇到将Word文档转换为PDF的需求&#xff0c;以便更好地分享和传输文件。在下面这篇文章中&#xff0c;就给大家介绍几种将Word文档转换为PDF的方法。 方法一&#xff1a;使用迅捷PDF转换器…