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

百度地图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;
。。。。。