基于uniapp做小程序轨迹点

前言

最近收到一个需求,需要做人员的轨迹点,由于我们设备无法持续提供经纬度点,所以只能做多个轨迹点,无法连成线,这也是客观原因导致的。如图是实现的效果:请添加图片描述
动画效果:https://live.csdn.net/v/277193

虽然实现了效果,但这里边的坑也不少,所以特此记录和分享一下。

一、marker 使用push传入点, 真机无效

在这里插入图片描述
之前认为这个轨迹点很简单,只要在markers 里面push一些数据,然后使用定时器就可以实现了,然后在模拟器上试了一下,可以的,但到了真机上完全不行了,真机效果如图:
在这里插入图片描述
发现只出现了第一个初始化的点,我后面 push 进去的点都没出现,后面查了资料,发现,真机上如果直接对markers push 是无效的, 必须要使用 markers=xxx 数值才有效果。这,猛男沉默了!!!!

二、绕个道

那既然这样,那我为何不采用,先把轨迹点都加载出来,但隐藏,然后使用定时器,依次展示,不就好了,emmm,这个方法不错,说干就干,
请添加图片描述
这里我先用了假的数据,先写了一个方法,这样就生成了12个点的轨迹坐标,直接在小程序可以看到,然后设置了opacity :0 ,就相当于默认隐藏了,之前是想使用v-if 的,但后面查了资料,发现,v-if 对
cover-image 在真机上又是无效的,所以只能在绕个道 使用动态的style 来实现这个效果,代码如图:
在这里插入图片描述

总结

如需完整代码,邮箱:[email protected]

猜你喜欢

转载自blog.csdn.net/weixin_43929450/article/details/129126752
今日推荐