关于leaflet的插件,leaflet_smoothmarkerbounce使用中的小bug,以及解决方法

近期在研究leaflet的使用,由于之前使用过百度地图API,故还算有点基础,leaflet的例子和API看的不算吃力。

由于leaflet本身对marker不支持动画,首先是想自己做一个动画效果。刚开始是采用setTimeout()函数来往返移动marker的position,效果勉强达到了,虽然很low。。。Ps:marker运动之前,我更换marker的Icon,imageUrl和size均改变了,一切正常。

后来,发现leaflet的官网上有动画的插件,leaflet_smoothmarkerbounce这个插件完美切合了我的需求,而且动画效果比我自己的强了不知道多少倍,所以开始使用这个插件替换我自己的动画效果(实在是不忍直视自己的low比动画)。当我满怀欣喜的使用上了这个插件之后,居然发现有个bug!!!


更换的marker的Icon之后,imageUrl正常修改了,size居然还是修改之前的那个。经过测试,发现真的是这个插件有bug。。。Icon本身是修改成功了,但是插件在执行之后,把大小重置为初始状态了。找到源码里面的这个方法,把marker打印到控制台,有很大的发现:

3

baseIconCssText这个字段中,包含了对marker这个图标在网页上的样式(包括position,height,width等等)的定义:


所以,猜想是这个字段对网页上marker的样式的定义起了决定性的作用,故在源码中修改这个字符串,使之与Icon同步:



至此,解决完毕。

后续,本想在在github上面共享一下,无奈不会用那个,给作者发了邮件(应该是发送成功了,作者有没有收到,我不知道,发送的地址是不是对的,我也不知道),作者也没搭理我,在这里写出来,希望能帮助到一些人。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值