|
|
@@ -1,15 +1,8 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <map
|
|
|
- v-if="polyline[0].points.length > 0"
|
|
|
- id="myMap"
|
|
|
- :markers="markers"
|
|
|
- :polyline="polyline"
|
|
|
- :include-points="polyline[0].points"
|
|
|
- :latitude="polyline[0].points[0].latitude"
|
|
|
- :longitude="polyline[0].points[0].longitude"
|
|
|
- style="width: 100%; height: calc(100vh - 90px)"
|
|
|
- />
|
|
|
+ <map v-if="polyline[0].points.length > 0" id="myMap" :markers="markers" :polyline="polyline"
|
|
|
+ :include-points="polyline[0].points" :latitude="polyline[0].points[0].latitude"
|
|
|
+ :longitude="polyline[0].points[0].longitude" style="width: 100%; height: calc(100vh - 90px)" />
|
|
|
<view class="hcp-bottom">
|
|
|
<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
|
|
|
<button v-else @click="handleStartMove()">开始移动</button>
|
|
|
@@ -18,27 +11,24 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const img = '/static/logo.png';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id:'',
|
|
|
- mapContext: null, //地图对象
|
|
|
- startMove: false, //是否开始回放
|
|
|
- nextPointIndex: 1, //下一个坐标点的索引
|
|
|
- durationTime: 1000, //相邻两点动画持续时长默认1秒
|
|
|
- //路线信息
|
|
|
- polyline: [
|
|
|
- {
|
|
|
+ const img = '/static/logo.png';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ mapContext: null, //地图对象
|
|
|
+ startMove: false, //是否开始回放
|
|
|
+ nextPointIndex: 1, //下一个坐标点的索引
|
|
|
+ durationTime: 1000, //相邻两点动画持续时长默认1秒
|
|
|
+ //路线信息
|
|
|
+ polyline: [{
|
|
|
width: 28,
|
|
|
points: [],
|
|
|
arrowLine: true,
|
|
|
color: '#3591FC',
|
|
|
- }
|
|
|
- ],
|
|
|
- //标记点(即移动标记物)
|
|
|
- markers: [
|
|
|
- {
|
|
|
+ }],
|
|
|
+ //标记点(即移动标记物)
|
|
|
+ markers: [{
|
|
|
id: 1,
|
|
|
width: 140,
|
|
|
height: 140,
|
|
|
@@ -49,122 +39,125 @@ export default {
|
|
|
x: 0.5,
|
|
|
y: 1
|
|
|
}
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.id = option.id
|
|
|
- this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //模拟获取远程数据
|
|
|
- getTrack() {
|
|
|
- this.$request.baseRequest('post', '//hyOrderTravelPath/getInfo', {
|
|
|
- orderId: this.id,
|
|
|
- }).then(res => {
|
|
|
- console.log("res",res)
|
|
|
- // this.polyline[0].points = [
|
|
|
- // {latitude: 39.997761, longitude: 116.478935},
|
|
|
- // {latitude: 39.997825, longitude: 116.478939},
|
|
|
- // {latitude: 39.998549, longitude: 116.478912},
|
|
|
- // {latitude: 39.998555, longitude: 116.478998},
|
|
|
- // {latitude: 39.998566, longitude: 116.479282},
|
|
|
- // {latitude: 39.998528, longitude: 116.479658},
|
|
|
- // {latitude: 39.998453, longitude: 116.480151},
|
|
|
- // {latitude: 39.998302, longitude: 116.480784},
|
|
|
- // {latitude: 39.998184, longitude: 116.481149},
|
|
|
- // {latitude: 39.997997, longitude: 116.481573},
|
|
|
- // {latitude: 39.997846, longitude: 116.481863},
|
|
|
- // {latitude: 39.997718, longitude: 116.482072},
|
|
|
- // {latitude: 39.997718, longitude: 116.482362},
|
|
|
- // {latitude: 39.998935, longitude: 116.483633},
|
|
|
- // {latitude: 39.998968, longitude: 116.48367},
|
|
|
- // {latitude: 39.999861, longitude: 116.484648}
|
|
|
- // ]
|
|
|
- // this.durationTime = Math.ceil(30000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
|
|
|
- // this.initMapData()
|
|
|
- })
|
|
|
- .catch(res => {
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: res.message,
|
|
|
- icon: 'none',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- //设置地图
|
|
|
- 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
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id
|
|
|
+ console.log(option.id)
|
|
|
+ this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
|
|
|
},
|
|
|
- //移动坐标
|
|
|
- movePoint() {
|
|
|
- /*
|
|
|
- //也可以用这个方法
|
|
|
- this.mapContext.moveAlong({
|
|
|
- duration: 30000,
|
|
|
- markerId: this.markers[0].id,
|
|
|
- path: this.polyline[0].points
|
|
|
- })
|
|
|
- return
|
|
|
- */
|
|
|
- // this.mapContext.moveAlong({
|
|
|
- // duration: 10000,
|
|
|
- // markerId: this.markers[0].id,
|
|
|
- // path: this.polyline[0].points
|
|
|
- // })
|
|
|
- console.log("this.nextPointIndex1 ",this.nextPointIndex ,this.polyline[0].points.length - 1)
|
|
|
- console.log("this.startMove1",this.startMove)
|
|
|
- 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 => {
|
|
|
-
|
|
|
- console.log("this.nextPointIndex ",this.nextPointIndex ,this.polyline[0].points.length - 1)
|
|
|
- console.log("this.startMove",this.startMove)
|
|
|
- //播放结束，继续移动到下一个点，最后一个点时结束移动
|
|
|
- if (this.nextPointIndex < this.polyline[0].points.length - 1) {
|
|
|
- this.nextPointIndex++
|
|
|
- if (this.startMove) {
|
|
|
- this.movePoint()
|
|
|
+ methods: {
|
|
|
+ //模拟获取远程数据
|
|
|
+ getTrack() {
|
|
|
+ this.$request.baseRequest('get', '/hyOrderTravelPath/getInfo', {
|
|
|
+ orderId: this.id,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 9999
|
|
|
+ }).then(res => {
|
|
|
+ console.log("res", res)
|
|
|
+ // this.polyline[0].points = [
|
|
|
+ // {latitude: 39.997761, longitude: 116.478935},
|
|
|
+ // {latitude: 39.997825, longitude: 116.478939},
|
|
|
+ // {latitude: 39.998549, longitude: 116.478912},
|
|
|
+ // {latitude: 39.998555, longitude: 116.478998},
|
|
|
+ // {latitude: 39.998566, longitude: 116.479282},
|
|
|
+ // {latitude: 39.998528, longitude: 116.479658},
|
|
|
+ // {latitude: 39.998453, longitude: 116.480151},
|
|
|
+ // {latitude: 39.998302, longitude: 116.480784},
|
|
|
+ // {latitude: 39.998184, longitude: 116.481149},
|
|
|
+ // {latitude: 39.997997, longitude: 116.481573},
|
|
|
+ // {latitude: 39.997846, longitude: 116.481863},
|
|
|
+ // {latitude: 39.997718, longitude: 116.482072},
|
|
|
+ // {latitude: 39.997718, longitude: 116.482362},
|
|
|
+ // {latitude: 39.998935, longitude: 116.483633},
|
|
|
+ // {latitude: 39.998968, longitude: 116.48367},
|
|
|
+ // {latitude: 39.999861, longitude: 116.484648}
|
|
|
+ // ]
|
|
|
+ // this.durationTime = Math.ceil(30000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
|
|
|
+ // this.initMapData()
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: res.message,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //设置地图
|
|
|
+ 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.moveAlong({
|
|
|
+ // duration: 10000,
|
|
|
+ // markerId: this.markers[0].id,
|
|
|
+ // path: this.polyline[0].points
|
|
|
+ // })
|
|
|
+ console.log("this.nextPointIndex1 ", this.nextPointIndex, this.polyline[0].points.length - 1)
|
|
|
+ console.log("this.startMove1", this.startMove)
|
|
|
+ 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 => {
|
|
|
+
|
|
|
+ console.log("this.nextPointIndex ", this.nextPointIndex, this.polyline[0].points
|
|
|
+ .length - 1)
|
|
|
+ console.log("this.startMove", this.startMove)
|
|
|
+ //播放结束，继续移动到下一个点，最后一个点时结束移动
|
|
|
+ if (this.nextPointIndex < this.polyline[0].points.length - 1) {
|
|
|
+ this.nextPointIndex++
|
|
|
+ if (this.startMove) {
|
|
|
+ this.movePoint()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.nextPointIndex = 1
|
|
|
+ this.startMove = false
|
|
|
}
|
|
|
- } else {
|
|
|
- this.nextPointIndex = 1
|
|
|
- this.startMove = false
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.hcp-bottom {
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 750rpx;
|
|
|
- position: fixed;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .hcp-bottom {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ position: fixed;
|
|
|
+ }
|
|
|
+</style>
|
zhongtianhaoyuan
