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