您的位置:首页 > 其它

百度地图 点击marker事件冒泡问题处理

2015-01-17 00:00 471 查看

百度地图API的事件处理:覆盖物的如何阻止冒泡

百度地图,为了让事件使用的更方便,进行一层封装
详情可以看官方的文档 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;
。。。。。


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: