南昌市高新区艾溪湖二路 366号悦峰商务广场1#办公楼 1404室 15179110655

您现在的位置:

地图和覆盖物事件

除了地图展示外,当我们在地图上进行操作时,少不了要对各种交互事件进行处理。本章将向您介绍地图的事件系统,其中包含如下内容: 事件绑定及解绑、 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事件中可以获取鼠标所在的经纬度位置。