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