地圖事件概述
瀏覽器中的JavaScript是“事件驅動的”，這表示JavaScript通過生成事件來響應交互，並期望程序能夠“監聽”感興趣的活動。例 如，在瀏覽器中，用戶的鼠標和鍵盤交互可以創建在DOM內傳播的事件。對某些事件感興趣的程序會為這些事件注冊JavaScript事件監聽器，並在接收 這些事件時執行代碼。
百度地圖API擁有一個自己的事件模型，程序員可監聽地圖API對象的自定義事件，使用方法和DOM事件類似。但請注意，地圖API事件是獨立的，與標准DOM事件不同。
事件監聽
百度地圖API中的大部分對象都含有addEventListener方法，您可以通過該方法來監聽對象事件。例如，BMap.Map包含 click、dblclick等事件。在特定環境下這些事件會被觸發，同時監聽函數會得到相應的事件參數e，比如當用戶點擊地圖時，e參數會包含鼠標所對 應的地理位置point。
有關地圖API對象的事件，請參考完整的API參考文檔。
addEventListener方法有兩個參數：監聽的事件名稱和事件觸發時調用的函數。在下面示例中，每當用戶點擊地圖時，會彈出一個警告框。
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addEventListener("click", function(){ alert("您點擊了地圖。"); });
通過監聽事件還可以捕獲事件觸發后的狀態。下面示例顯示用戶拖動地圖后地圖中心的經緯度信息。
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); });
事件參數和this
在標准的DOM事件模型中（DOM Level 2 Events），監聽函數會得到一個事件對象e，在e中可以獲取有關該事件的信息。同時在監聽函數中this會指向觸發該事件的DOM元素。 百度地圖API的事件模型與此類似，在事件監聽函數中傳遞事件對象e，每個e參數至少包含事件類型（type）和觸發該事件的對象（target）。 API還保證函數內的this指向觸發（同時也是綁定）事件的API對象。
例如，通過參數e得到點擊的經緯度坐標。
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() + "級"); });
移除監聽事件
當您不再希望監聽事件時，可以將事件監聽進行移除。每個API對象提供了removeEventListener用來移除事件監聽函數。
下面示例中，用戶第一次點擊地圖會觸發事件監聽函數，在函數內部對事件監聽進行了移除，因此后續的點擊操作則不會觸發監聽函數。
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);
實例：
點擊地圖彈出所在的經緯度
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-family:"微軟雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <title>地圖單擊事件</title> </head> <body> <div id="allmap"></div> <p>添加點擊地圖監聽事件，點擊地圖后顯示當前經緯度</p> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); function showInfo(e){ alert(e.point.lng + ", " + e.point.lat); } map.addEventListener("click", showInfo); </script>
感謝您的閱讀！