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报$ is not a function 的问题的解决方法
Jan 20 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
js实现弹窗猜数字游戏
Nov 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue实现购物车的监听
2020/04/20 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
线程同步的方法
2016/11/23 面试题
网络技术专业求职信
2014/02/18 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers