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 学习笔记(一)
Oct 13 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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静态变量当缓存的方法
2013/11/13 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
幼儿园校车司机的岗位职责
2014/01/30 职场文书
高三政治教学反思
2014/02/06 职场文书
升职演讲稿范文
2014/05/23 职场文书
无毒社区工作方案
2014/05/23 职场文书
装修活动策划方案
2014/08/27 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
金秋助学感谢信
2015/01/21 职场文书
PHP基本语法
2021/03/31 PHP