实现百度地图marker平滑移动

先讲一下思路,再贴代码

效果图,图片被csdn吃了,贴链接吧

图片

车辆的图片比较难找,最后随便找张图片

背景

公司说要实现一个车辆监控功能,所以先给了我一些经纬度,叫我模拟车辆移动的过程.
刚开始实现的方式就是简单的将车辆不断的设置到下一个经纬度,但这种实现方式有一个问题,就是将地图拉大的时候车辆看起来明显不是在移动,是在跳到某个点.
然后看到web端的效果是真正的在移动,但不断地查百度的api都没有可以让marker移动的方法.

实现思路

最后想出一种方式,就是将2个点分解了n多个点,让车辆更加频繁的跳,从而实现类平滑移动.然后看到百度地图最大可以放大到5m/cm,

所以决定设置最大方法20m/cm,然后2点之间每个5米移动一次,也就是如果将地图缩放到最大,车辆每次移动的距离是0.25cm,这个时候肉眼看起来就比较像在移动

最后经过测试,当手机有点卡的时候,看起来还是有点假.当手机比较流畅的时候,看起来就真的是在移动.当然,这个睡眠时间和移动距离还是要根据实际情况进行调整.也可以直接去掉睡眠时间,只是要去掉的话需要直接去掉Thread.sleep()代码,否则会抛异常,使用睡眠时间是为了可以控制帧数,所以要用不用看你怎么想的吧.

关于画线

如果按照最简单的方式,每2个点画一条线,你会发现走不到一半整个地图就卡得要死.

原因是画的线太多了,本身就已经给了200多个点,然后还要将这200多个点每2个点分成n多个点,这个时候至少都要有1,2千个点吧,所以要转换一下实现思路.

最后想到的办法是:当车辆在2个点中的点行驶的时候,不断的画线.当行驶完成后,再从第一个点和中间经过的点画一条线,再把这些小线清除掉.这样地图上就只保留一条线,也就不卡了.

可能表达得有问题,有人看不懂.举例:第一个点和第二个点之间相距20米,这个时候车辆在走完这段距离的时候会画4条线,当走玩之后就在第一个点和第二个点上画一条线,再清除这4条小线.

第二个点到第三个点:同理,中间画4条小线.最后,在百度地图上完整的线就是,第一个点到第二个点,第二个点到第三个点的线,再清除小线.这样就看起来很像边走边画

源码

2018-10-27更新:

今天在百度地图文档中发现Marker可以设置动画,注意:百度地图的版本必须在5.1.0以上

这个Animation有几个实现类

其中我们看到有一个叫Transformation的子类,他有2个构造方法

一个是扔一堆经纬度,一个是扔一堆给点

经过测试,扔一堆经纬度给他之后确实会按照你给的经纬度走,不过有一个问题,他不会旋转.这时肯定很多人想到动画监听器是吧,所以就看了一下监听器,结果监听器就这几个方法

没有一个方法能用,当然了,百度也提供了AnimationSet,不过看了RotateAnimation的构造方法就知道这种方式也没戏了

而且看过Android Profiler的CPU使用率,测试机为小米note顶配版,使用这种方式的使用率在10多%到20多%之间,而我上面用的那种方式也差不多在这个区间,所以感觉这个没什么用,我就不上Demo了,自己去玩玩就知道了

更新一下，以于2019.5月从该公司离职，所以现在手头上也没有数据可以测试。以前做这个功能的时候，年少不懂事，不清楚0.x的版本就是未正式发布的版本，所以用了kotlin的那个库。所以如果谁有时间，可以的话，还请改为kotlin协程，然后提一个PR让我review一下，非常感谢。