您的位置:首页 > 其它

百度地图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也继续执行,也就是传说中的“事件穿透了”

很明显,这里需要阻止冒泡。想当然的,我们会使用如下的方法。

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