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).
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值