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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
JavaScript的==运算详解
Jul 20 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
《雪儿》教学反思
2014/04/17 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
Python Socket编程详解
2021/04/25 Python
解决numpy和torch数据类型转化的问题
2021/05/23 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript