Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码


Posted in Javascript onApril 26, 2013

在调试功能模块时候,发现怎么用什么方法都无法在infowindow里面添加的div进行绑定事件处理。郁闷啊!上网搜了好多方法也没用,
后来想想还是查了一下官方的API,发现了google.maps.InfoWindow下面的Events里面有个domready事件

官方解释
This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically.
本人理解大概的意思就是InfoWindow里面动态添加的Dom元素完成后的回调函数。
js是个单线程的引擎,只有等到DOM创建完成之后才能绑定事件,这样理解起来应该很简单了吧!
看同事写的js代码,里面好多setTimeout之类的延迟 估计没弄清楚脚本执行的顺利 觉的延迟几秒就行执行,其实问题很大。哪些脚本要先执行,哪些要后执行 都是有顺序的。
google.maps.event.addDomListener googleMap 提供的监听Dom元素的事件

上代码

google.maps.event.addListener(infowindow,"domready",function(){ 
var Cancel = document.getElementById("Cancel"); 
var Ok=document.getElementById("Ok"); 
google.maps.event.addDomListener(Cancel,"click",function(){infowindow.close();}); 
google.maps.event.addDomListener(Ok,"click",function(){infowindow.close();}); 
});

官方API:https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=zh-cn
Javascript 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 #Javascript
jquery中.add()的使用分析
Apr 26 #Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 #Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 #Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 #Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript错误处理
2015/02/03 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
商业房地产广告语
2014/03/13 职场文书
高考标语大全
2014/06/05 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
信访维稳承诺书
2015/05/04 职场文书
在职证明书模板
2015/06/15 职场文书
运动员代表致辞
2015/07/29 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android