示例中心
功能在线体验
控制台

高德 开发 地图 JS API 教程 事件系统 地图和覆盖物事件

更新时间:2018年05月28日

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

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

事件绑定及解绑

使用事件前,先要介绍一下 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);

查看参考手册


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;
});

查看参考手册

地图事件

地图事件是对 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 事件中可以获取鼠标所在的经纬度位置。

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


覆盖物事件

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


事件种类

事件名称

说明

覆盖物状态改变时触发

Marker、Text 类对象发生移动

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事件中可以获取鼠标所在的经纬度位置。参考示例

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



移动端
示例中心
功能
在线体验
常见问题