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类中的公有变量和私有变量
Jul 24 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
javascript防抖函数debounce详解
2019/06/11 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python中的字典详细介绍
2014/09/18 Python
RC4文件加密的python实现方法
2015/06/30 Python
Python实现截屏的函数
2015/07/26 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
浅析NumPy 切片和索引
2020/09/02 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
同学会主持词
2014/03/18 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年试用期工作总结
2014/12/12 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Vue的生命周期一起来看看
2022/02/24 Vue.js