<template>
<view>
<nav-bar :leftText="leftText" :leftIcon="leftIcon"></nav-bar>
<view style="display: flex;flex-direction: column;">
<view class="topTip">
<view class='normal conter'>
<p class="checkRecordNo">{{dataObj.checkRecordNo}}</p>
<p class="typeName">{{dataObj.typeName}}</p>
<p class="subTitle">{{dataObj.inChargeUser.name}}</p>
<p><button id="buttonId" style="background-color: #007aff;color: #fff; border: #007aff;"
@click="replayTrajectory" size="mini">回放轨迹</button></p>
</view>
</view>
<view class="map">
<map name="map" ref="map" id="map" style="height: 1200rpx;width: 100%;" :latitude="latitude"
:longitude="longitude" :enable-satellite="true" :markers="markers" :show-compass="true"
:polyline="polyline" @updated="updated">
</map>
</view>
</view>
</view>
</template>
<script>
import {
getCheckTrack
} from '@/api/index.js'
export default {
data() {
return {
leftText: "轨迹查看",
leftIcon: 'arrow-left',
latitude: null,
longitude: null,
markers: [],
polyline: [],
points: [],
id: null,
dataObj: {},
playbackInterval: null,
nextPointIndex: 0,
mapContext: null,
};
},
onLoad(options) {
try {
this.dataObj = JSON.parse(decodeURIComponent(options.item))
this.getCheckTrackData();
} catch (error) {
console.error("Failed to parse options.item:", error);
}
},
onReady() {
this.mapContext = uni.createMapContext('map', this)
},
methods: {
updated() {
this.getCheckTrackData();
},
//轨迹回放
replayTrajectory() {
this.mapContext.moveAlong({
markerId: this.markers[0].id,
path: this.points,
autoRotate: false,
duration: 3000,
fail(err) {
console.log("err", err);
},
success(res) {
console.log('res', res);
},
complete(e) {
console.log("都执行", e);
}
})
// this.mapContext.moveAlong({
// markerId: this.markers[0].id,
// path: this.points,
// duration: 3000,
// complete: () => {
// console.log('执行');
// }
// })
},
getCheckTrackData() {
getCheckTrack({
checkId: this.dataObj.id
}).then(res => {
this.points = res.data.map(item => {
let i = this.$wgs84ToGcj02(item.latitude, item.longitude);
return i;
});
if (this.points.length === 0) {
uni.showToast({
title: '暂无轨迹数据',
icon: 'error'
})
return
};
this.latitude = this.points[0].latitude;
this.longitude = this.points[0].longitude;
// 添加起点标记
const newMarkers = this.points.map((item, index) => ({
id: "start" + index,
latitude: item.latitude,
longitude: item.longitude,
height: 30,
width: 30,
iconPath: '/static/map_1.png',
}));
// this.$set(this, 'markers', [...this.markers, ...newMarkers]);
this.markers = [...newMarkers]
// this.markers.push({
// id: 0,
// latitude: this.latitude,
// longitude: this.longitude,
// height: 30,
// width: 30,
// iconPath: '/static/map.png',
// });
this.polyline = [{
points: this.points,
color: "#007aff",
width: 8,
}]
})
}
}
};
</script>
<style lang="scss" scoped>
.topTip {
margin: 0 auto;
flex: .3;
width: 95%;
margin-top: 10rpx;
}
.map {
flex: auto;
margin-top: 30rpx;
}
.conter {
/* 毛玻璃效果 */
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 8rpx 20rpx 0 rgba(31, 38, 135, 0.37);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
font-weight: bold;
z-index: 1000;
text-align: center;
}
.normal {
height: 240rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
这个是代码,请问有什么问题吗?
2 个回复
DCloud_UNI_Anne
注意文档平台差异说明
1***@qq.com
兄弟 解决没有 我也是最近开发app 地图 使用nvue 页面的轨迹回放也不行