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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
Vue组件跨层级获取组件操作
Jul 27 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
世界上第一台立体声收音机
2021/03/01 无线电
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
用js实现in_array的方法
2013/11/05 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python中的默认参数详解
2015/06/24 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
中学教师教育感言
2014/02/21 职场文书
委托公证书
2014/04/08 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
活动倡议书范文
2014/05/13 职场文书
房屋产权证明书
2014/10/15 职场文书
结婚典礼致辞
2015/07/28 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
SQL 聚合、分组和排序
2021/11/11 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏