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