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 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
json对象转字符串如何实现
Dec 02 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
js实现磁性吸附的示例
Oct 26 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定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python绘制简单折线图代码示例
2017/12/19 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python进行统计建模
2020/08/10 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
傲盾软件面试题
2015/08/17 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
采购主管的岗位职责
2013/12/17 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
党员违纪检讨书
2014/02/18 职场文书
商务日语专业自荐信
2014/04/17 职场文书
预防煤气中毒方案
2014/06/16 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
MySQL 如何限制一张表的记录数
2021/09/14 MySQL