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控制表单不能输入空格的小例子
Nov 20 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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判断网页是否gzip压缩
2013/06/25 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python简单实现基数排序算法
2015/05/16 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
将相和教学反思
2014/02/04 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
学校交通安全责任书
2014/08/25 职场文书
领导欢迎词致辞
2015/01/23 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript