uniapp地图轨迹回放
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) {
},
// #endif
onReady: 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.
微信小程序预览效果
效果图
扫描公众号，了解更多实例分享：
参考
微信小程序实现轨迹回放的示例代码
微信小程序实现活动轨迹回放