高德地图 JS API—地图和覆盖物事件

高德地图 JS API—地图和覆盖物事件

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

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

事件绑定及解绑

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

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

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 对象。该对象包含触发的对象目标、触发所在经纬度等信息:JavaScript

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、closeContextMenu 类对象调用 open()close()方法后触发。
鼠标、触屏等进行交互时触发鼠标按下及移动等click、dblclick、mousemove、mouseover、mouseout、mouseup、mousedown、mousewheel、rightclick和 DOM 事件类似,鼠标点击后触发。回调函数返回的 MapsEvent事件中可以获取鼠标所在的经纬度位置。参考示例
触屏点击touchstart、 touchmove、 touchend仅在移动设备触屏时触发。回调函数返回的 MapsEvent事件中可以获取鼠标所在的经纬度位置。参考示例
0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x