Vue引入高德地图自定义信息窗体绑定点击事件无效解决方案

你们好,我是金金金。

场景

笔者用的Vue3,引入了高德地图,version2.0,场景如下:

  • 在地图上根据经纬度度打点标记了一个位置,然后点击点标记弹出自定义信息窗体,右上角关闭按钮则是绑定了关闭自定义信息窗体的事件,当点击时:
  • 报错:closeInfo is not defined

排查

贴一下相关代码

  • 关闭自定义信息窗体的方法
  • 关闭按钮绑定的事件

可以看到关闭按钮是绑定了closeInfo这个函数的,那为什么报错closeInfo未定义呢?细心的小伙伴肯定也发现了为什么这里不是@click而是用onclick绑定事件呢

造成error的原因

  1. 为什么是用onclick而不能用@click

    • 原因是这些元素是作为字符串插入到 DOM 树中的,因此 Vue 的事件系统无法捕捉到它们并为其绑定事件处理器。在这种情况下,应该使用原生的 onclick 属性来添加事件监听器。

      Vue 在编译模板时,会自动为带有 v-on:click@click 的元素添加事件监听器。但是,这种机制依赖于 Vue 在渲染组件时能够控制和操作 DOM 元素。当直接在模板字符串中插入一个元素,并且这个元素需要绑定一个事件时,由于它是动态插入的,Vue 可能没有机会去处理这个元素的事件绑定,所以需要使用原生的 onclick 事件属性来绑定事件处理函数。这种方法不需要 Vue 处理,可以直接在 HTML 字符串中使用

  2. 为什么会报错closeInfo未定义呢?

    • closeInfo 方法是在 Vue 组件的 methods 中定义的,那么它默认只能在 Vue 组件管理的 DOM 元素中被调用。这也就是为什么会报错未定义的原因,如果直接在 HTML 字符串中使用 onclick 来绑定事件,那么这个方法需要被定义在全局作用域内。

解决

既然知道了函数报错未定义的原因是因为作用域相关的问题,把closeInfo挂载到window上,点击时就可以在原型链中找到该函数,我这里在钩子函数中将其挂载到window

测试

无报错,事件也能正常触发,和预期结果一致,自定义信息窗体被关闭

总结

重点就是涉及到一些原生知识,由于是直接在字符串里面插入的元素,所以脱离了Vue的一些控制,细心点也是很好解决的~

  • 编写有误还请大佬指正,万分感谢。
相关推荐
非凡ghost13 分钟前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost15 分钟前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller21 分钟前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户9047066835723 分钟前
commonjs的本质
前端
Sailing31 分钟前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
麦麦大数据32 分钟前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
Pa2sw0rd丶34 分钟前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
麦麦大数据38 分钟前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱
非凡ghost1 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
j七七1 小时前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信