微信小程序的运动轨迹回放在哪里

本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放。

最终效果：

1、文件index.wxml代码如下，这一块比较简单，可自行查看分析；

!--index.wxml--viewclass="container"mapid="map"longitude="{{longitude}}"latitude="{{latitude}}"scale="14"markers="{{markers}}"polyline="{{polyline}}"enable-satellite="{{satellite}}"show-locationstyle="width: 100%; height: 100vh;"/map/view

2、文件index.js存放所有功能的逻辑代码，相对比较复杂，主要分析几个重点方法：

1）方法getDistance用于计算两个坐标点之间的距离，参数为两个坐标点的经纬度；

2）方法translateMarker使用translateMarker实现marker平移，为了实现多点之间连续平移，在内部嵌套方法translateMarker；

3）wx.getLocation用来获取当前的坐标点。

Tips：

points中的“+-”0.01等，无特别意义，可以自己任意修改；实际情况可调用接口获取轨迹数据；

duration = getDistance * 2中的2，无特别意义，可根据实际情况自行调整。