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 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
js实现AI五子棋人机大战
May 28 Javascript
vue实现扫码功能
Jan 17 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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
动易数据转成dedecms的php程序
2007/04/07 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python unittest单元测试框架总结
2018/09/08 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
个人授权委托书
2014/04/03 职场文书
高三毕业寄语
2014/04/10 职场文书
技术合作协议书范本
2014/04/18 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
开学第一周值周总结
2015/07/16 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL