Leaflet.js imageOverlay无法触发点击事件

公司项目需求为用户上传光栅图,然后在图上标注监控点位,因百度地图API不支持不使用地图直接操作一张图片,于是选择Leaflet.js实现业务功能。

看网上代码将光栅图以 imageOverlay 对象添加到地图容器,后发现无法触发点击事件,关键代码如下

var image = L.imageOverlay('images/timg.jpg', bounds).addTo(map);
image.on('click',function(e){
      console.log(e);
})

搜索半天没找到结果,只能去翻阅官方API,才发现问题,imageOverlay 对象有个默认属性interactive默认值为false,即默认不响应鼠标事件,将其设成true就正常了。

var image = L.imageOverlay('images/timg.jpg', bounds,{interactive:true}).addTo(map);
image.on('click',function(e){
      console.log(e);
})

imageOverlay 对象支持的鼠标事件比marker的少,如下:

Event   Description
click    Fired when the user clicks (or taps) the layer.
dblclick    Fired when the user double-clicks (or double-taps) the layer.
mousedown    Fired when the user pushes the mouse button on the layer.
mouseup    Fired when the user releases the mouse button pushed on the layer.
mouseover    Fired when the mouse enters the layer.
mouseout    Fired when the mouse leaves the layer.
contextmenu   Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).

转载自:https://blog.csdn.net/zhangtff/article/details/83036762

You may also like...