浏览器中的 JavaScript是“事件驱动的”,这表示 java script通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册java script事件监听器,并在接收这些事件时执行代码。
百度地图API拥有一个自己的事件模型,我们可监听地图API对象的自定义事件,使用方法和DOM事件类似。但要注意的是,地图API事件是独立的,与标准DOM事件不同。
事件监听
百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。例如,BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对应的地理位置point。
有关地图API对象的事件,请参考完整的API参考文档。
addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例中,每当用户点击地图时,会弹出一个警告框。
通过监听事件还可以捕获事件触发后的状态。
// BMap是百度地图API的命名空间,所有的类都在这里面
var map = new BMap.Map("container"); //
var point = createPoint(108.961636, 34.238584); // 创建一个点
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
map.addEventListener("click", function() {
alert("点击地图~");
});
map.addEventListener("dragend", function() {
alert("地图中心变为:" + "[" + map.getCenter().lng + ","
+ map.getCenter().lat + "]");
});
事件参数和this
例如,通过参数e得到点击的经纬度坐标,或者通过this得到地图缩放后的级别。
map.addEventListener("click", function(e) {
alert("[" + e.point.lng + ", " + e.point.lat + "]");
});
map.addEventListener("zoomend", function() {
alert("地图缩放至:" + this.getZoom() + " 级");
});
移除监听事件
当不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。
下面示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。
<script type="text/java script">
var map = null;
function load() {
map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", showInfo);
}
function showInfo(e) {
alert(e.point.lng + ", " + e.point.lat);
map.removeEventListener("click", showInfo);
}
这里面有一个小的陷阱,且看如下代码:
<script type="text/java script">
var map = null;
function load() {
map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(e){
showInfo(e);
});
}
function showInfo(e) {
alert(e.point.lng + ", " + e.point.lat);
alert(map);
map.removeEventListener("click", showInfo);
}
上面代码是实现不了移除监听器的,那是为什么呢???
---因为AddEventListener注册事件监听的时候跟"click"绑定的是一个匿名函数,removeEventListener的时候却是showInfo这个函数。
文章来源:http://blog.csdn.net/ysjian_pingcx/article/details/22729629