开发 地图 JS API 2.0 进阶教程 事件系统 地图和覆盖物事件

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

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

  1. 事件绑定及解绑
  2. MapsEvent 对象
  3. 地图事件
  4. 覆盖物事件

1、事件绑定及解绑

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

和大多数类库使用方式相同,直接使用 Map、覆盖物对象的onoff方法:

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

地图缩放等级变化时触发。这里的缩放等级可以是鼠标、键盘操作产生,也可以通过 setZoomzoomInzoomOut 触发产生。

地图中心点移动

mapmove

   

movestart

    

moveend

地图平移时,即地图中心点发生改变时触发。

这里平移可以是通过鼠标、键盘操作产生,也可以通过 setCenterpanTopanBy 等产生地图平移效果的接口触发产生。 

其中,如果平移交互持续进行或者动画过程中,mapmove事件会持续触发。

地图容器尺寸改变

resize

地图容器大小改变后触发。

通常浏览器窗口被调整,或者 DOM 容器尺寸改变时会触发。 

需要注意的是 Map 的 resizeEnable 开启时该事件才会正确触发。

鼠标、触屏等进行交互时触发

鼠标按下及移动等

click

 

dblclick

 

mousemove

 

mouseover

 

mouseout

 

mouseup

 

mousedown

 

mousewheel

 

rightclick

和 DOM 事件类似,鼠标点击后触发。

回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。

参考示例

触屏点击

touchstart

 

touchmove

 

touchend

仅在移动设备触屏时触发。

回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。

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

4、覆盖物事件

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

事件种类

事件名称

说明

覆盖物状态改变时触发

MarkerText 类对象发生移动

moving

 

moveend

 

movealong

事件仅在点标记Marker和文字标记Text移动时触发。

矢量图形显示、隐藏

hide

 

show

矢量图形调用 show()hide()方法后触发。

ContextMenu 类对象打开关闭

open

 

close

ContextMenu 类对象调用 open()close()方法后触发。

鼠标、触屏等进行交互时触发

鼠标按下及移动等

click

 

dblclick

 

mousemove

 

mouseover

 

mouseout

 

mouseup

 

mousedown

 

mousewheel

 

rightclick

和 DOM 事件类似,鼠标点击后触发。回调函数返回的 MapsEvent事件中可以获取鼠标所在的经纬度位置。参考示例

触屏点击

touchstart、 

 

touchmove、 

 

touchend

仅在移动设备触屏时触发。回调函数返回的 MapsEvent事件中可以获取鼠标所在的经纬度位置。参考示例

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

返回顶部 示例中心 常见问题 智能客服 公众号
二维码