地圖事件概述
瀏覽器中的JavaScript是“事件驅(qū)動(dòng)的”,這表示JavaScript通過(guò)生成事件來(lái)響應(yīng)交互,并期望程序能夠“監(jiān)聽(tīng)”感興趣的活動(dòng)。例如,在瀏覽器中,用戶的鼠標(biāo)和鍵盤交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對(duì)某些事件感興趣的程序會(huì)為這些事件注冊(cè)JavaScript事件監(jiān)聽(tīng)器,并在接收這些事件時(shí)執(zhí)行代碼。
百度地圖API擁有一個(gè)自己的事件模型,程序員可監(jiān)聽(tīng)地圖API對(duì)象的自定義事件,使用方法和DOM事件類似。但請(qǐng)注意,地圖API事件是獨(dú)立的,與標(biāo)準(zhǔn)DOM事件不同。
事件監(jiān)聽(tīng)
百度地圖API中的大部分對(duì)象都含有addEventListener方法,您可以通過(guò)該方法來(lái)監(jiān)聽(tīng)對(duì)象事件。例如,BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會(huì)被觸發(fā),同時(shí)監(jiān)聽(tīng)函數(shù)會(huì)得到相應(yīng)的事件參數(shù)e,比如當(dāng)用戶點(diǎn)擊地圖時(shí),e參數(shù)會(huì)包含鼠標(biāo)所對(duì)應(yīng)的地理位置point。
有關(guān)地圖API對(duì)象的事件,請(qǐng)參考完整的API參考文檔。
addEventListener方法有兩個(gè)參數(shù):監(jiān)聽(tīng)的事件名稱和事件觸發(fā)時(shí)調(diào)用的函數(shù)。在下面示例中,每當(dāng)用戶點(diǎn)擊地圖時(shí),會(huì)彈出一個(gè)警告框。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(){
alert("您點(diǎn)擊了地圖。");
});
通過(guò)監(jiān)聽(tīng)事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶拖動(dòng)地圖后地圖中心的經(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("地圖中心點(diǎn)變更為:" + center.lng + ", " + center.lat);
});
事件參數(shù)和this
在標(biāo)準(zhǔn)的DOM事件模型中(DOM Level 2 Events),監(jiān)聽(tīng)函數(shù)會(huì)得到一個(gè)事件對(duì)象e,在e中可以獲取有關(guān)該事件的信息。同時(shí)在監(jiān)聽(tīng)函數(shù)中this會(huì)指向觸發(fā)該事件的DOM元素。 百度地圖API的事件模型與此類似,在事件監(jiān)聽(tīng)函數(shù)中傳遞事件對(duì)象e,每個(gè)e參數(shù)至少包含事件類型(type)和觸發(fā)該事件的對(duì)象(target)。 API還保證函數(shù)內(nèi)的this指向觸發(fā)(同時(shí)也是綁定)事件的API對(duì)象。
例如,通過(guò)參數(shù)e得到點(diǎn)擊的經(jīng)緯度坐標(biāo)。
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);
});
或者通過(guò)this得到地圖縮放后的級(jí)別。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("zoomend", function(){
alert("地圖縮放至:" + this.getZoom() + "級(jí)");
});
移除監(jiān)聽(tīng)事件
當(dāng)您不再希望監(jiān)聽(tīng)事件時(shí),可以將事件監(jiān)聽(tīng)進(jìn)行移除。每個(gè)API對(duì)象提供了removeEventListener用來(lái)移除事件監(jiān)聽(tīng)函數(shù)。
下面示例中,用戶第一次點(diǎn)擊地圖會(huì)觸發(fā)事件監(jiān)聽(tīng)函數(shù),在函數(shù)內(nèi)部對(duì)事件監(jiān)聽(tīng)進(jìn)行了移除,因此后續(xù)的點(diǎn)擊操作則不會(huì)觸發(fā)監(jiān)聽(tīng)函數(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);