地圖事件概述

瀏覽器中的JavaScript是“事件驅(qū)動的”，這表示JavaScript通過生成事件來響應交互，并期望程序能夠“監(jiān)聽”感興趣的活動。例如，在瀏覽器中，用戶的鼠標和鍵盤交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對某些事件感興趣的程序會為這些事件注冊JavaScript事件監(jiān)聽器，并在接收這些事件時執(zhí)行代碼。

百度地圖API擁有一個自己的事件模型，程序員可監(jiān)聽地圖API對象的自定義事件，使用方法和DOM事件類似。但請注意，地圖API事件是獨立的，與標準DOM事件不同。

事件監(jiān)聽

百度地圖API中的大部分對象都含有addEventListener方法，您可以通過該方法來監(jiān)聽對象事件。例如，BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會被觸發(fā)，同時監(jiān)聽函數(shù)會得到相應的事件參數(shù)e，比如當用戶點擊地圖時，e參數(shù)會包含鼠標所對應的地理位置point。

有關(guān)地圖API對象的事件，請參考完整的API參考文檔。

addEventListener方法有兩個參數(shù)：監(jiān)聽的事件名稱和事件觸發(fā)時調(diào)用的函數(shù)。在下面示例中，每當用戶點擊地圖時，會彈出一個警告框。

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

map.addEventListener("click", function(){   

 alert("您點擊了地圖。");   

});

通過監(jiān)聽事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶拖動地圖后地圖中心的經(jīng)緯度信息。

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

map.addEventListener("dragend", function(){   

 var center = map.getCenter();   

 alert("地圖中心點變更為：" + center.lng + ", " + center.lat);   

});

事件參數(shù)和this

在標準的DOM事件模型中（DOM Level 2 Events），監(jiān)聽函數(shù)會得到一個事件對象e，在e中可以獲取有關(guān)該事件的信息。同時在監(jiān)聽函數(shù)中this會指向觸發(fā)該事件的DOM元素。 百度地圖API的事件模型與此類似，在事件監(jiān)聽函數(shù)中傳遞事件對象e，每個e參數(shù)至少包含事件類型（type）和觸發(fā)該事件的對象（target）。 API還保證函數(shù)內(nèi)的this指向觸發(fā)（同時也是綁定）事件的API對象。

例如，通過參數(shù)e得到點擊的經(jīng)緯度坐標。

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

map.addEventListener("click", function(e){   

 alert(e.point.lng + ", " + e.point.lat);   

});

或者通過this得到地圖縮放后的級別。

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

map.addEventListener("zoomend", function(){   

 alert("地圖縮放至：" + this.getZoom() + "級");   

});

移除監(jiān)聽事件

當您不再希望監(jiān)聽事件時，可以將事件監(jiān)聽進行移除。每個API對象提供了removeEventListener用來移除事件監(jiān)聽函數(shù)。

下面示例中，用戶第一次點擊地圖會觸發(fā)事件監(jiān)聽函數(shù)，在函數(shù)內(nèi)部對事件監(jiān)聽進行了移除，因此后續(xù)的點擊操作則不會觸發(fā)監(jiān)聽函數(shù)。

var map = new BMap.Map("container");   

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   

function showInfo(e){   

 alert(e.point.lng + ", " + e.point.lat);   

 map.removeEventListener("click", showInfo);   

}   

map.addEventListener("click", showInfo);