百度地图API的事件处理:覆盖物的如何阻止冒泡
2014-01-07 19:24
357 查看
百度地图,为了让事件使用的更方便,进行一层封装
详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm
主要的修改点:
1. 使用事件代理。
2. 重新封闭事件对象。
3. 事件对象的this指向map自己。
4. 附加了一些地图特有的属性,如地图位置point等。
说明: 对map对象和覆盖物都做了代理。
那么开发的时候,可能会遇到什么问题?
case: 事件穿透:
地图上有一个覆盖物, 当点击此覆盖物的时候,会招待执行对应操作,执行完之后,地图的普通poi也继续执行,也就是传说中的“事件穿透了”
很明显,这里需要阻止冒泡。想当然的,我们会使用如下的方法。
一招待发现有问题,stopPropagation方法找不到。
原来是bmap进行了封装,它将原始的事件放到一个domEvent中了。 这点与jquery是一样的处理,修复后的代码如下。
OK了。
地图的源码实现如下
详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm
主要的修改点:
1. 使用事件代理。
2. 重新封闭事件对象。
3. 事件对象的this指向map自己。
4. 附加了一些地图特有的属性,如地图位置point等。
说明: 对map对象和覆盖物都做了代理。
那么开发的时候,可能会遇到什么问题?
case: 事件穿透:
地图上有一个覆盖物, 当点击此覆盖物的时候,会招待执行对应操作,执行完之后,地图的普通poi也继续执行,也就是传说中的“事件穿透了”
很明显,这里需要阻止冒泡。想当然的,我们会使用如下的方法。
var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 16); var circle = new BMap.Circle(point,500); map.addOverlay(circle); circle.onclick = function(e){ e.stopPropagation(); }
一招待发现有问题,stopPropagation方法找不到。
原来是bmap进行了封装,它将原始的事件放到一个domEvent中了。 这点与jquery是一样的处理,修复后的代码如下。
var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 16); var circle = new BMap.Circle(point,500); map.addOverlay(circle); circle.onclick = function(e){ e.domEvent.stopPropagation(); }
OK了。
地图的源码实现如下
baidu.lang.Event.prototype.inherit = function (e) { var me = this; this.domEvent = e = window.event || e; me.clientX = e.clientX || e.pageX; me.clientY = e.clientY || e.pageY; 。。。。。
相关文章推荐
- redhat 安装图形界面
- struts标签+jstl标签之国际化实例
- 查找CSS错误的完整步骤
- Android开发之切换activity动画overridePendingTransition
- STDIN_FILENO的作用及与stdin 的区别
- UVA 10396 - Vampire Numbers(暴力打表)
- 主设备号、次设备号
- Linux命令的组成规则及其全拼单词
- Source Insight 有用设置配置
- Nginx介绍及视频教程
- Azkaban 的作业类型插件
- Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set to 0.
- 命令行程序选项解析函数—getopt
- linux双系统安装时可能会遇见的一些问题
- 浅谈foreach遍历的使用
- getopt_long 与 optind
- 加密算法
- SQLite 入门教程(四)增删改查,有讲究
- Python调用飞信接口发送短信
- git_合并几个commit