地图和覆盖物事件
除了地图展示外,当我们在地图上进行操作时,少不了要对各种交互事件进行处理。本章将向您介绍地图的事件系统,其中包含如下内容: 事件绑定及解绑、 MapsEvent 对象、 地图事件、 覆盖物事件
事件绑定及解绑
使用事件前,先要介绍一下 JS SDK 事件绑定方式。 和大多数类库使用方式相同,直接使用 Map、覆盖物对象的 on、off 方法:
var clickHandle=function(point){ document.getElementById("lnglat").value = point.lngLat.toString(); } map.on('click', clickHandle); map.off('click', clickHandle);
MapsEvent
对于 Map、覆盖物、叠加层对象的鼠标、触屏绑定事件回调时,会返回 MapsEvent 对象。该对象包含触发的对象目标、触发所在经纬度等信息:
map.on('click', function(events) { // 触发事件的对象的原生事件 var original = events.originalEvent; // 触发事件的地理坐标,map.LngLat 类型 var lnglat = events.lngLat; // 触发事件的像素坐标,map.Point 类型 var px = events.point; // 触发事件的对象 var target = events.target; });
地图事件
地图事件是对 Map 底图操作后触发的事件,具体分类见下表:
事件种类 | 事件名称 | 说明 |
---|---|---|
地图加载完成 |
load |
地图图块加载完成后触发。这时可以获取地图的各种状态(如中心点、当前缩放等级等)。 在这时可以添加依赖地图的组件或者调用其他依赖地图的逻辑(如在地图上绘制图形等)。 |
地图缩放等级改变 |
zoomstart、 zoomend |
地图缩放等级变化时触发。这里的缩放等级可以是鼠标、键盘操作产生,也可以通过 setZoom、zoomIn、zoomOut 触发产生。 |
地图中心点移动 |
mapmove、 movestart、 moveend |
地图平移时,即地图中心点发生改变时触发。 这里平移可以是通过鼠标、键盘操作产生,也可以通过 setCenter、panTo 等产生地图平移效果的接口触发产生。 其中,如果平移交互持续进行或者动画过程中,mapmove 事件会持续触发。 |
地图容器尺寸改变 |
resize |
地图容器大小改变后触发。 通常浏览器窗口被调整,或者 DOM 容器尺寸改变时会触发。 |
鼠标按下及移动等 |
click、 dblclick、 mousemove、 mouseover、 mouseout、 mouseup、 mousedown、 mousewheel、 contextmenu |
和 DOM 事件类似,鼠标点击后触发。 回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。 |
触屏点击 |
touchstart、 touchmove、 touchend |
仅在移动设备触屏时触发。 回调函数返回的 MapsEvent 事件中可以获取鼠标所在的经纬度位置。 |
覆盖物事件
覆盖物是指叠加在地图底图之上的一些常见要素,比如点标记、弹窗等,都属于覆盖物。更多覆盖物类型可以 参考这里。对覆盖物的事件相对简单很多,和 DOM 事件类似,具体内容见下表:
事件种类 | 事件名称 | 说明 |
---|---|---|
覆盖物拖拽 |
dragstart、 drag、 dragend |
拖拽覆盖物触发的事件,拖拽中drag事件会持续触发 |
鼠标按下及移动等 |
click、 dblclick、 mousemove、 mouseover、 mouseout、 mouseup、 mousedown、 mousewheel、 contextmenu |
和 DOM 事件类似,鼠标点击后触发。回调函数返回的 MapsEvent事件中可以获取鼠标所在的经纬度位置。 |