AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
简介

浏览器中的JavaScript是“事件驱动的”,这表示JavaScript通过生成事件来响应交互,并期望程序能够“监听”感兴趣的活动。例如,在浏览器中,用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器,并在接收这些事件时执行代码。
百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。

事件监听

百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。例如,BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对应的地理位置point。
有关地图API对象的事件,请参考完整的API类参考文档

1. 弹窗事件

addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。

如下示例中,每当用户点击地图时,会弹出一个警告框:

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404,39.915), 11);
map.addEventListener("click", function() {
alert("您点击了地图。");
});
2. 捕获状态

通过监听事件还可以捕获事件触发后的状态。

如下示例,显示用户拖动地图后地图中心的经纬度信息:

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对象。

1. 事件参数e获取有关信息

例如,通过参数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);
});
2. this指向DOM元素

监听函数中this会指向触发该事件的DOM元素。

如下示例,通过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用来移除事件监听函数。

1. 移除监听事件

如下示例中,用户第一次点击地图会触发事件监听函数,在函数内部对事件监听进行了移除,因此后续的点击操作则不会触发监听函数。

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);

上一篇

自定义绘制层

下一篇

检索POI
本篇文章对您是否有帮助?