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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
vue之nextTick全面解析
May 17 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
Protoss建筑一览
2020/03/14 星际争霸
php下封装较好的数字分页方法
2010/11/23 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
php读取本地json文件的实例
2018/03/07 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
javascript void(0)的妙用
2009/10/21 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python with语句的原理与用法详解
2020/03/30 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
自荐书模板
2013/12/15 职场文书
作文批改评语大全
2014/04/23 职场文书
婚礼秀策划方案
2014/05/19 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
亮剑精神观后感
2015/06/05 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏