地图事件

更新时间：2025-08-04

简介

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

DEMO详情

事件监听

百度地图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);