uniapp地图轨迹回放

欢迎使用ay-contrail插件

最近有需求为：在地图上展示一些点的轨迹，按时间先后顺序回放。已实现任意多点的轨迹回放，整理插件代码如下：

1.ay-contrail插件

可去uniapp插件市场的地图轨迹插件页面下载.

属性

属性	类型	说明
mapId	String	地图id，默认mapId_contrail
points	Array	轨迹数组
	longitude	Number 经度
	latitude	Number 纬度
scale	Number	缩放级别，取值范围为3-20，默认14
longitude	Number	当前位置经度
latitude	Number	当前位置纬度
satellite	Boolean	是否开启卫星图，默认开启

下面是插件的 代码片.

<template><view><map :id="mapId" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :polyline="polyline":enable-satellite="satellite" show-location style="width: 100%; height: 100vh;"@markertap="tapMarker"></map></view>
</template><script>export default {components: {},props: {mapId: {type: String,default: 'mapId_contrail'},points: {type: Array,default () {return []}},scale: {type: Number,default: 14},latitude: {type: Number,default: 39.806466},longitude: {type: Number,default: 98.226473},//是否开启卫星图satellite: {type: Boolean,default: true},},data() {return {i: 0, // 用于循环markers: [], // 标记点集合polyline: [], // 坐标点集合mapCtx : {},}},mounted:function(){let that = this;that.mapCtx = uni.createMapContext(that.mapId,this); // 创建 map 上下文 MapContext 对象},watch: {points(e) {let that = this;if(that.points.length>0){that.setDateByPoints(that.points) ;}},},created: function() {let that = this;if(that.points.length>0){that.setDateByPoints(that.points) ;}},methods: {tapMarker(e){this.$emit('markertap', e);},setDateByPoints(points) {let that = this;// 标记点集合let markers = points;markers.map((value, index) => {markers[index].id = index + 1;});that.polyline = [{points: points,color: "#FF0000DD",width: 2}];that.markers = markers;this.translateMarker(markers);},// 平移marker，带动画translateMarker: function(markers) {let that = this;let markerId = markers[that.i].id ;let destination = {longitude: markers[that.i + 1].longitude,latitude: markers[that.i + 1].latitude};let getDistance = that.getDistance(markers[that.i].latitude, markers[that.i].longitude, markers[that.i + 1].latitude,markers[that.i + 1].longitude);let duration = getDistance * 2; // 根据距离计算平移的速度，看起来保持匀速this.mapCtx.translateMarker({markerId: markerId,destination: destination,autoRotate: true,rotate: 30,duration: duration,success(res) {that.i = that.i + 1;// 小于长度减1才执行if (that.i < markers.length - 1) {that.translateMarker(markers);}},fail(err) {console.log('fail', err)}})},// 计算两坐标点之间的距离getDistance: function(lat1, lng1, lat2, lng2) {let rad1 = lat1 * Math.PI / 180.0;let rad2 = lat2 * Math.PI / 180.0;let a = rad1 - rad2;let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;let r = 6378137;return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)},},}
</script><style>
</style>

此处需要注意，在组件中创建在mounted方法里面，并后面括号要加this
（若在页面中创建，在onReady方法，this也不是必须的）

2.引用插件

可去uniapp插件市场的地图轨迹插件页面，下载项目

项目结构如下：

下面index.vue是引用插件的 代码片.

<template><view><aycontrail  :points="points" :latitude="latitude" :longitude="longitude" scale="12" :satellite="true"></aycontrail></view></template><script>import aycontrail from '../components/ay-contrail/ay-contrail.vue';export default {components: {aycontrail,},computed: {},data() {return {points: [],latitude: 39.806466,longitude: 98.226473,};},// #ifdef MP-WEIXIN//微信小程序的分享onShareAppMessage: function(options) {},// #endifonReady: function() {},onLoad: function() {let that = this;},onShow: function() {let that = this;// 获取当前坐标uni.getLocation({type: 'wgs84',success: (res) => {let longitude = res.longitude ;let latitude = res.latitude ;// 坐标集合let points = [{longitude: longitude,latitude: latitude}, {longitude: longitude - 0.02,latitude: latitude + 0.02}, {longitude: longitude + 0.03,latitude: latitude + 0.03}, {longitude: longitude - 0.01,latitude: latitude + 0.02}, {longitude: longitude,latitude: latitude}];that.latitude = res.latitude;that.longitude = res.longitude;that.points = points;},fail:function(err){let longitude = that.longitude ;let latitude = that.latitude ;// 坐标集合let points = [{longitude: longitude,latitude: latitude}, {longitude: longitude - 0.02,latitude: latitude + 0.02}, {longitude: longitude + 0.03,latitude: latitude + 0.03}, {longitude: longitude - 0.01,latitude: latitude + 0.02}, {longitude: longitude,latitude: latitude}];that.points = points;}})},methods: {},}
</script><style lang="scss"></style>

3.配置

微信小程序：
1.配置自己的微信小程序appid；
2.微信小程序后台：设置->第三方平台授权管理->腾讯位置服务；
3.腾讯位置服务也绑定微信小程序appid.

微信小程序预览效果

效果图

扫描公众号，了解更多实例分享：

参考

微信小程序实现轨迹回放的示例代码
微信小程序实现活动轨迹回放

uniapp地图轨迹回放相关推荐

Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
微信小程序map地图轨迹回放的问题
map地图轨迹回放报FaceTo的错误如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行. 这 ...
Android实现高德地图轨迹回放
Android实现高德地图轨迹回放写在前面准备官方文档解读创建应用: 地图api引入: 权限添加效果展示过程实现地图初始化定位显示标记点点平滑移动添加呼吸点写在结尾写在前面 ...
高德地图轨迹回放功能
一.介绍在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...
DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点加注轨迹纠偏函数,根据时间判定此次移 ...
高德地图-轨迹回放（二）
利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的. 实现地图轨迹的主要函数如下 function track(){map.c ...
高德地图轨迹回放、点的弹跳效果、浏览器环境监测、设置地图的主题样式、GPS坐标转为高德坐标、地图加载提示、地图DOM事件、修改图层等API接口
1.轨迹回放 https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data 2.点的 ...
高德地图轨迹回放、路径规划以及计算面积（超详细！！）
主要涉及到高德地图的路径规划.区域规划以及轨迹回放功能. 一.基础设置:地图 //创建地图var map = new AMap.Map('map',{zoom:17,//视角级别//中心点坐标// p ...