<template>
<view>
<!--顶部轨迹-->
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
<view class="topbox">
<view class="locusnum" :class="{'selectlocusnum' : rSelect.indexOf(index)!=-1}"
v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">
{
{value.name}}
</view>
</view>
</scroll-view>
<!--轨迹地图-->
<view class="mapbox">
<map class="mapstyle" id="myMap" :polyline="polyline" :markers="markers"
v-if="polyline[0].points.length > 0" :latitude="polyline[0].points[0].latitude"
:longitude="polyline[0].points[0].longitude" :include-points="polyline[0].points">
<view class="map-floatA">共计3段轨迹</view>
<view class="map-floatB">2022/09/28</view>
</map>
</view>
<view class="hcp-bottom">
<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
<button v-else @click="handleStartMove()">开始移动</button>
</view>
<!--底部盒子-->
<view class="bottomBox">
<view class="oneTier">
<view class="placeBox">
<view class="twig">
<view class="tag">起</view>
<view class="taginfo">江门豪爵研发中心</view>
</view>
<view class="twig">
<view class="tag">终</view>
<view class="taginfo">席帽山森林公园</view>
</view>
</view>
<view class="rideBox">
<text class="ride-mileage">骑行里程/</text>
<view class="ride-text">
<text class="ride-textA">25.9</text>
<text class="ride-textB">km</text>
</view>
</view>
</view>
<view class="num-storey">
<view class="ride-numbox">
<view class="ride-num numA">01：19：46</view>
<view class="ride-name">骑行时长</view>
</view>
<view class="ride-numbox">
<view class="ride-num">
<text class="numA">78</text>
<text class="numB">km/h</text>
</view>
<view class="ride-name">最高速度</view>
</view>
<view class="ride-numbox">
<view class="ride-num">
<text class="numA">59.3</text>
<text class="numB">km/h</text>
</view>
<view class="ride-name">平均速度</view>
</view>
</view>
<view class="num-storey">
<view class="ride-numbox">
<view class="ride-num">
<text class="numA">178</text>
<text class="numB">次</text>
</view>
<view class="ride-name">急刹车次数</view>
</view>
<view class="ride-numbox">
<view class="ride-num">
<text class="numA">131</text>
<text class="numB">次</text>
</view>
<view class="ride-name">急加速次数</view>
</view>
<view class="ride-numbox">
<view class="ride-num">
<text class="numA">59</text>
<text class="numB">次</text>
</view>
<view class="ride-name">急转弯次数</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
infoArr: [{
name: "全天轨迹"
}, {
name: "轨迹1"
}, {
name: "轨迹2"
}, {
name: "轨迹3"
}, {
name: "轨迹4"
}, {
name: "轨迹5"
}, {
name: "轨迹6"
}],
rSelect: [],
// longitude: 116.368904,
// latitude: 39.904600,
mapContext: null, //地图对象
startMove: false, //是否开始回放
nextPointIndex: 1, //下一个坐标点的索引
durationTime: 1000, //相邻两点动画持续时长默认1秒
//路线信息
polyline: [{
width: 8,
points: [],
arrowLine: true,
color: '#27bd09e6',
}],
//标记点(即移动标记物)
markers: [{
id: 1,
width: 40,
height: 40,
latitude: 0,
longitude: 0,
iconPath: '../../static/img/icon/Marker.png',
anchor: {
x: 0.5,
y: 1
}
}]
};
},
onLoad(option) {
this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
},
methods: {
tapInfo(e) {
if (this.rSelect.indexOf(e) == -1) {
this.rSelect.splice(0, this.rSelect.length); //清空
this.rSelect.push(e);
} else {
this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
}
},
//
//模拟获取远程数据
getTrack() {
this.polyline[0].points = [{
longitude: 116.362122,
latitude: 39.903423
}, {
longitude: 116.372122,
latitude: 39.913423
}, {
longitude: 116.382122,
latitude: 39.923423
}, {
longitude: 116.392122,
latitude: 39.933423
}]
this.durationTime = Math.ceil(30000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
this.initMapData()
},
//设置地图
initMapData() {
this.initMarkers()
this.mapContext = uni.createMapContext('myMap', this)
},
//设置位置（从起点开始）
initMarkers() {
this.markers[0].latitude = this.polyline[0].points[0].latitude
this.markers[0].longitude = this.polyline[0].points[0].longitude
},
//开始移动
handleStartMove() {
this.startMove = true
this.movePoint()
},
//停止移动
handleStopMove() {
this.startMove = false
},
//移动坐标
movePoint() {
/*
//也可以用这个方法
this.mapContext.moveAlong({
duration: 30000,
markerId: this.markers[0].id,
path: this.polyline[0].points
})
return
*/
this.mapContext.translateMarker({
duration: this.durationTime,
markerId: this.markers[0].id,
destination: {
latitude: this.polyline[0].points[this.nextPointIndex].latitude,
longitude: this.polyline[0].points[this.nextPointIndex].longitude
},
animationEnd: res => {
//播放结束，继续移动到下一个点，最后一个点时结束移动
if (this.nextPointIndex < this.polyline[0].points.length - 1) {
this.nextPointIndex++
if (this.startMove) {
this.movePoint()
}
} else {
this.nextPointIndex = 1
this.startMove = false
}
}
})
}
},
};
</script>
<style lang="scss">
page {
background-color: white;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.topbox {
margin: 0px 0px 0px 6rpx;
display: flex;
align-items: center;
}
.locusnum {
padding: 14rpx 20rpx;
margin: 4rpx 12rpx;
text-align: center;
font-size: 28rpx;
color: #9b9b9b;
border-radius: 10rpx;
background-color: #f7f7f7;
}
.selectlocusnum {
padding: 14rpx 20rpx;
margin: 4rpx 12rpx;
text-align: center;
font-size: 28rpx;
color: white;
border-radius: 10rpx;
background-color: black;
}
.mapbox {
margin: 10rpx 20rpx;
}
.mapstyle {
width: 100%;
height: 360px;
position: relative;
}
.map-floatA {
width: 22%;
position: absolute;
bottom: 110rpx;
left: 20rpx;
background-color: #292929a6;
color: white;
font-size: 24rpx;
padding: 10rpx 30rpx;
border-radius: 10rpx;
letter-spacing: 2rpx;
text-align: center;
}
.map-floatB {
width: 22%;
position: absolute;
bottom: 40rpx;
left: 20rpx;
background-color: #292929a6;
color: white;
font-size: 24rpx;
padding: 10rpx 30rpx;
border-radius: 10rpx;
letter-spacing: 2rpx;
text-align: center;
}
.bottomBox {
margin: 10rpx 20rpx;
}
.oneTier {
display: flex;
justify-content: space-between;
}
.twig {
width: 96%;
// margin-bottom: 20rpx;
display: flex;
justify-content: flex-start;
}
.tag {
width: 10%;
font-size: 14px;
padding: 14rpx;
color: white;
text-align: center;
background-color: #999999;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
.taginfo {
width: 90%;
font-size: 14px;
padding: 14rpx 20rpx;
text-align: left;
color: #767676;
background-color: #f7f7f7;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.placeBox {
width: 66%;
height: 130rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.rideBox {
width: 34%;
height: 124rpx;
padding: 5rpx 20rpx;
background-color: #f7f7f7;
border-radius: 10rpx;
}
.ride-mileage {
font-size: 14px;
color: #959595;
}
.ride-text {
margin-top: 10rpx;
}
.ride-textA {
font-size: 60rpx;
font-weight: bold;
font-style: italic;
}
.ride-textB {
margin-left: 20rpx;
color: #949494;
font-style: italic;
}
.num-storey {
display: flex;
justify-content: space-between;
align-items: center;
}
.ride-numbox {
width: 27%;
height: 120rpx;
margin-top: 14rpx;
padding: 5rpx 20rpx;
background-color: #f7f7f7;
border-radius: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ride-num {
margin-bottom: 10rpx;
}
.numA {
font-size: 32rpx;
font-weight: bold;
font-style: italic;
}
.numB {
font-size: 24rpx;
margin-left: 20rpx;
color: #949494;
font-style: italic;
}
.ride-name {
font-size: 14px;
color: #959595;
}
.hcp-bottom {
left: 0;
bottom: 0;
width: 750rpx;
position: fixed;
}
</style>
实现效果，微信小程序上可以出现移动效果
