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 相关文章推荐
js实现省市联动效果的简单实例
Feb 10 Javascript
javascript 回调函数详解
Nov 11 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
基于Angularjs实现分页功能
May 30 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 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中使用Oracle数据库(6)
2006/10/09 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
关于python2 csv写入空白行的问题
2018/06/22 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python图片的横坐标汉字实例
2019/12/04 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python pip使用超时问题解决方案
2020/08/03 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
会计毕业生自我鉴定
2013/11/04 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
诚信考试承诺书
2014/03/27 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
个人自荐书怎么写
2015/03/26 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript