地图和覆盖物事件最后更新时间: 2024年02月26日

除了地图展示外，当我们在地图上进行操作时，少不了要对各种交互事件进行处理。本文介绍地图的事件系统，其中包含如下内容：

事件绑定及解绑
MapsEvent 对象
地图事件
覆盖物事件

1、事件绑定及解绑

使用事件前，先要介绍一下 JS API 事件绑定方式。

和大多数类库使用方式相同，直接使用 Map、覆盖物对象的on、off方法：

var map = new AMap.Map("container");
var clickHandler = function(e) {
  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};

//绑定事件
map.on('click', clickHandler);
//解绑事件
map.off('click', clickHandler);

查看参考手册

2、MapsEvent 对象

对于 Map、覆盖物、叠加层对象的鼠标、触屏绑定事件回调时，会返回MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息：

map.on("click", function (ev) {
  //触发事件的对象
  var target = ev.target;

  //触发事件的地理坐标，AMap.LngLat 类型
  var lnglat = ev.lnglat;

  //触发事件的像素坐标，AMap.Pixel 类型
  var pixel = ev.pixel;

  //触发事件类型
  var type = ev.type;
});

查看参考手册

3、地图事件

地图事件是对 Map 底图操作后触发的事件，具体分类见下表：

	事件种类	事件名称	说明
地图内部状态改变时触发	地图加载完成	complete	地图图块加载完成后触发。这时可以获取地图的各种状态（如中心点、当前缩放等级等）。在这时可以添加依赖地图的组件或者调用其他依赖地图的逻辑（如在地图上绘制图形等）。参考示例
	地图缩放等级改变	zoomstart、 zoomend	地图缩放等级变化时触发。这里的缩放等级可以是鼠标、键盘操作产生，也可以通过 setZoom、zoomIn、zoomOut 触发产生。
	地图中心点移动	mapmove、 movestart、 moveend	地图平移时，即地图中心点发生改变时触发。这里平移可以是通过鼠标、键盘操作产生，也可以通过 setCenter、panTo、panBy 等产生地图平移效果的接口触发产生。其中，如果平移交互持续进行或者动画过程中，mapmove事件会持续触发。
	地图容器尺寸改变	resize	地图容器大小改变后触发。通常浏览器窗口被调整，或者 DOM 容器尺寸改变时会触发。需要注意的是 Map 的 resizeEnable 开启时该事件才会正确触发。
鼠标、触屏等进行交互时触发	鼠标按下及移动等	click、 dblclick、 mousemove、 mouseover、 mouseout、 mouseup、 mousedown、 mousewheel、 rightclick	和 DOM 事件类似，鼠标点击后触发。回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。参考示例
鼠标、触屏等进行交互时触发	触屏点击	touchstart、 touchmove、 touchend	仅在移动设备触屏时触发。回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。

具体请参考示例代码及参考手册

4、覆盖物事件

覆盖物是指叠加在地图底图之上的一些常见要素，比如点标记、图标标记、文本标记、线类型标记、面类型标记等，都属于覆盖物。更多覆盖物类型可以参考这里。对覆盖物的事件相对简单很多，和 DOM 事件类似，具体内容见下表：