AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL 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方法,您可以通过该方法来监听对象事件。例如,BMapGL.Map包含click、dblclick等事件。在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e,比如当用户点击地图时,e参数会包含鼠标所对应的地理位置latlng。

1. 参考展示地图创建基本地图
2. 监听地图的单击事件

addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。 如下示例中,每当用户点击地图时,会弹出一个警告框:

map.addEventListener('click', function(e) {
alert('click!')
});
3. 在回调函数中添加一些逻辑

通过回调函数的参数,可以获取当前点击点的经纬度信息,下面的例子弹出了获取的经纬度,和转换后的墨卡托坐标地址。

map.addEventListener('click', function(e) {
alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
});
4. 移除事件监听

可以通过removeEventListener方法移除对事件的监听。

map.addEventListener('click', handleClick);
function handleClick (e) {
alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);

上一篇

自定义覆盖物

下一篇

右键菜单
本篇文章对您是否有帮助?