百度地图infowindow上添加自定义点击事件
这是个困扰我已久的问题。就是在百度地图的infowindow上添加一个按钮,点击按钮,调用自定义事件。
之前我的解决方案是:
这样是可以的,当我点击“查看详情”时,会调用detailMsg方法,但是后来发现一个问题:就是当我把infowindow窗口关闭,再次点击标注,试图打开infowindow时,会报错:
这个问题我始终找不到原因,也无法解决,后来我还是用回了老方法,就是用字符串的方式创建动态dom元素,如下:
但是这样始终都没办法监听到detailMsg事件,后来我把事件动态加载上去,如下:
这样的效果是页面刷新之后第一次点击的时候会报错:
当把infowindow关闭之后,第二次打开再点击的时候就是ok的,于是,我想可能是第一次点击的时候,元素还没有渲染到dom结构上,于是想用事件委托,将事件委托给父级元素,但是尝试之后发现这样是行不通的。
然后看到网上有人说infowindow添加事件要使用infowindow的open事件才行,于是尝试使用了如下代码:
可是这样做了之后效果是第一次点击有效,之后怎么点击都无效,哎,长路漫漫啊~~~
于是乎,我就把这两个结合了起来,但是那个报错依旧存在,所以我就想能不能第一次点击调用这个办法,以后就调用上边那个方法,那么问题来了,这个判断条件要怎么写呢?然后就去扒文档,在文档中发现了
经测试发现,这个isOpen只有在第一次点击的时候是false,其他时间都是true,到此问题得到解决。
代码如下:
百度地图infowindow上添加自定义点击事件相关推荐
- echarts 地图去除点击事件_echarts 取消图例上的点击事件和图表上鼠标滑过点击事件...
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, formatter: " ...
- google地图--自定义标记以及点击事件
之前做项目需要使用到地图,由于是做国外网站,所以考虑了几种地图之后,决定用谷歌地图.但是在完成某一需求时,碰到了问题:点击marker标记,弹出设计图上的内容.谷歌地图默认的弹框和设计图不符合,所有我 ...
- android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
- vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 页面内容 在对应的组件的最外层div上加上这样的样式: .conten ...
- 百度地图InfoWindow事件绑定
最近用百度地图开发了一个功能,需要绑定marker的提示框InfoWindow的事件,用百度原先提供的API :addEventListener方法绑定事件没有任何反应. 处理方案: 1.引入 < ...
- 百度地图infowindow的close事件_百度地图蒙圈:车主要加油误导母婴店 跑偏理由令人啼笑皆非...
常在江湖飘,哪有不挨刀.经常驾车出门在外的您,有过被导航坑的经历么?其实在早些年手机导航刚刚兴起的时候,这类现象确实比较常见,但是到了如今大数据的时代,手机导航数据更新比较及时,问题已经少了很多.不过 ...
- 百度地图infowindow的close事件_高德地图,百度地图,腾讯地图哪个更准?
先说结论 高德第一,百度第二,腾讯第三 这些地图商,他们是怎么知道"我家门口新开了一家咖啡店"这一事件的,并且标注上去还拍了照片呢?有些店新开了,有些店倒闭了,10年以前这条街上的 ...
- 百度地图Mark 点自动点击 触发mark点击事件
this.map.getOverlays() //这个是获取mark点的集合 可以打印出来看一下 然后直接结果 //下面这行是触发点击事件的代码!!!this.map.getOverlays()[0] ...
- 百度地图之添加覆盖物并响应事件
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) 本文中将介绍在百度地图上添加覆盖物的功能.响应点击功能和弹出pop功能,代码来自百度Demo: Activit ...
- 百度地图InfoWindow信息窗口的自定义和样式修改
最近捣腾百度地图,在做标志物点击事件显示信息窗口时,发现官方的信息窗口只给了固定的样式,且比较普通.那么该如何想修改成自己想要的样式? 1.在官方给出的原基础上进行修改 了解这种方法有助于你理解官方的 ...
最新文章
- 基于mpi的奇偶排序_并行程序设计(第2版)pdf
- python监听文件更改记录_如何用机器人监听老板微信?
- 去除源文件中的重复行的程序流程及其C代码实现
- 邮件 自动打印 linux,Unix / Linux基本实用程序-打印,电子邮件
- 机器视觉 · 工业镜头
- linux几个常用的环境变量配置文件
- 推荐搜索系统论文干货集锦(持续更新)
- python Anaconda2安装OpenCV2
- eclipse 查找
- 【java】深入探讨 Java 类加载器
- Python数据清洗处理,csv,pandas,数据匹配
- 微信朋友圈 腾讯服务器,朋友圈@微信能得一面红旗?腾讯服务器一度宕机
- Excel筛选出符合自己条件的数据
- 【数据分析报告】携程客户分析与流失预测
- c语言编程怎么样,C语言怎么样,好学吗?
- 为什么那么多公司在用快速开发平台开发软件?下表说明了一切
- 基于密度聚类算法的改进
- 无人机倾斜摄影测量影像处理关键技术
- 百度AI的时代献礼:与央视搭AI秀台,让万物智能样貌清晰可见
- 第三章习题2存款利息的计算