AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/06 11:50
地图事件
简介

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

事件监听

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

1. 参考展示地图创建基本地图

创建基础地图的教程见展示地图

2. 监听地图的单击事件

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

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

通过回调函数的参数,可以获取当前点击点的经纬度信息,下面的例子弹出了获取的经纬度。

function handleClick (e) {
alert('点击的坐标:' + e.point.lng + ', ' + e.point.lat);
}
map.addEventListener('click', handleClick);
4. 移除事件监听

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

// 移除事件
map.removeEventListener('click', handleClick);
事件列表

地图支持多种事件,通过功能的组合可以实现绝大多数场景下的交互需求。以下是常见的地图事件,完整的事件支持类参考见MapEventMap

1. 鼠标事件
事件名交互触发方式

click

左键单击地图时触发

dblclick

鼠标双击地图时触发,双击时依次触发 click → click → dblclick

rightclick

右键单击地图时触发

rightdblclick

右键双击地图时触发,双击时依次触发 rightclick → rightclick → rightdblclick

mousemove

鼠标在地图区域移动时持续触发

mousedown

鼠标按下时触发

mouseup

鼠标松开时触发

mouseover

鼠标移入地图区域时触发

mouseout

鼠标移出地图区域时触发

2.拖拽事件
事件名交互触发方式

dragstart

开始拖拽地图时触发

dragging

拖拽地图过程中持续触发

dragend

停止拖拽地图时触发

3.移动与缩放事件
事件名交互触发方式

movestart

地图移动开始时触发

moving

地图移动过程中持续触发

moveend

地图移动结束时触发

zoomstart

地图开始更改缩放级别时触发

zooming

地图缩放过程中触发

zoomend

地图完成缩放级别变化时触发

上一篇

展示地图

下一篇

地图UI控件
本篇文章对您是否有帮助?