|
|
@@ -1,325 +1,215 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
|
|
|
- <block slot="backText">返回</block>
|
|
|
- <block slot="content">地图轨迹</block>
|
|
|
- </cu-custom>
|
|
|
-
|
|
|
- <view class="container">
|
|
|
- <map id='map' :latitude="latitude" :longitude="longitude" :markers="covers" :style="{ width: '100%', height: mapHeight + 'px' }"
|
|
|
- :scale="13" :polyline="polyline">
|
|
|
- </map>
|
|
|
-
|
|
|
- <view class="btnBox">
|
|
|
- <button :disabled="isDisabled" @click="start" class="cu-btn bg-blue round shadow lg">轨迹回放</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <map v-if="polyline[0].points.length > 0" ref="myMap" id="myMap" :markers="markers" :polyline="polyline"
|
|
|
+ :latitude="polyline[0].points[0].latitude" :longitude="polyline[0].points[0].longitude"
|
|
|
+ style="width: 100%; height: 2000rpx" @updated="test" />
|
|
|
+ <!-- <view v-if="polyline[0].points.length > 0" class="hcp-bottom">
|
|
|
+ <button v-if="startMove" @click="handleStopMove()">暂停移动</button>
|
|
|
+ <button v-else @click="handleStartMove()">开始移动</button>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<!-- 注：vue只支持小程序及H5，如打包App，请修改代码为nvue，或加群要文件 -->
|
|
|
-
|
|
|
<script>
|
|
|
+ const img = '/static/logo.png';
|
|
|
+ import * as config from '@/config'
|
|
|
+ // let baseUrl = config.def().baseUrlNew
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- map:null,
|
|
|
-
|
|
|
- windowHeight: 0,
|
|
|
- mapHeight: 0,
|
|
|
- timer: null,
|
|
|
-
|
|
|
- isDisabled:false,
|
|
|
- isStart: false,
|
|
|
- playIndex:1,
|
|
|
-
|
|
|
- id: 0, // 使用 marker点击事件 需要填写id
|
|
|
- title: 'map',
|
|
|
- latitude: 34.263734,
|
|
|
- longitude: 108.934843,
|
|
|
- // 标记点
|
|
|
- covers: [{
|
|
|
- id: 1,
|
|
|
- width: 42,
|
|
|
- height: 47,
|
|
|
- rotate: 270,
|
|
|
- latitude: 34.259428,
|
|
|
- longitude: 108.947040,
|
|
|
- iconPath: 'http://cdn.zhoukaiwen.com/car.png',
|
|
|
- callout: {
|
|
|
- content: "陕A·88888", // 车牌信息
|
|
|
- display: "ALWAYS",
|
|
|
- fontWeight: "bold",
|
|
|
- color: "#5A7BEE", //文本颜色
|
|
|
- fontSize: "12px",
|
|
|
- bgColor: "#ffffff", //背景色
|
|
|
- padding: 5, //文本边缘留白
|
|
|
- textAlign: "center",
|
|
|
- },
|
|
|
- anchor: {
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- },
|
|
|
- }],
|
|
|
-
|
|
|
- // 线
|
|
|
- polyline: [],
|
|
|
|
|
|
- // 坐标数据
|
|
|
- coordinate: [{
|
|
|
- latitude: 34.259428,
|
|
|
- longitude: 108.947040,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.252918,
|
|
|
- longitude: 108.946963,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.252408,
|
|
|
- longitude: 108.946240,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.249286,
|
|
|
- longitude: 108.946184,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.248670,
|
|
|
- longitude: 108.946640,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.248129,
|
|
|
- longitude: 108.946826,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.243537,
|
|
|
- longitude: 108.946816,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.243478,
|
|
|
- longitude: 108.939003,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.241218,
|
|
|
- longitude: 108.939027,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.241192,
|
|
|
- longitude: 108.934802,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.241182,
|
|
|
- longitude: 108.932235,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.247227,
|
|
|
- longitude: 108.932311,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250833,
|
|
|
- longitude: 108.932352,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250877,
|
|
|
- longitude: 108.931756,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250944,
|
|
|
- longitude: 108.931576,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250834,
|
|
|
- longitude: 108.929662,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250924,
|
|
|
- longitude: 108.926015,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.250802,
|
|
|
- longitude: 108.910121,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.269718,
|
|
|
- longitude: 108.909921,
|
|
|
- problem: true,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.269221,
|
|
|
- longitude: 108.922366,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.274531,
|
|
|
- longitude: 108.922388,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.276201,
|
|
|
- longitude: 108.923433,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.276559,
|
|
|
- longitude: 108.924004,
|
|
|
- problem: false,
|
|
|
- },
|
|
|
- {
|
|
|
- latitude: 34.276785,
|
|
|
- longitude: 108.945855,
|
|
|
- problem: false,
|
|
|
- }
|
|
|
- ],
|
|
|
- posi: { // 汽车定位点的数据，后面只用改latitude、longitude即可
|
|
|
+ scaleNum: 10,
|
|
|
+ mapContext: null, //地图对象
|
|
|
+ startMove: false, //是否开始回放
|
|
|
+ nextPointIndex: 1, //下一个坐标点的索引
|
|
|
+ durationTime: 1000, //相邻两点动画持续时长默认1秒
|
|
|
+ //路线信息
|
|
|
+ polyline: [{
|
|
|
+ width: 20,
|
|
|
+ points: [],
|
|
|
+ arrowLine: true,
|
|
|
+ color: '#3591FC',
|
|
|
+ }],
|
|
|
+ //标记点(即移动标记物)
|
|
|
+ markers: [{
|
|
|
id: 1,
|
|
|
- width: 32,
|
|
|
- height: 32,
|
|
|
+ width: 40,
|
|
|
+ height: 40,
|
|
|
latitude: 0,
|
|
|
longitude: 0,
|
|
|
- iconPath: "http://cdn.zhoukaiwen.com/car.png",
|
|
|
- callout: {
|
|
|
- content: "陕A·85Q1Q", // 车牌信息
|
|
|
- display: "BYCLICK",
|
|
|
- fontWeight: "bold",
|
|
|
- color: "#5A7BEE", //文本颜色
|
|
|
- fontSize: "12px",
|
|
|
- bgColor: "#ffffff", //背景色
|
|
|
- padding: 5, //文本边缘留白
|
|
|
- textAlign: "center",
|
|
|
- },
|
|
|
+ iconPath: img,
|
|
|
anchor: {
|
|
|
x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- },
|
|
|
- }
|
|
|
+ y: 1
|
|
|
+ }
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id
|
|
|
+ console.log(this.id)
|
|
|
+ this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
|
|
|
|
|
|
- },
|
|
|
- // 分享小程序
|
|
|
- onShareAppMessage(res) {
|
|
|
- return {
|
|
|
- title: '看看这个小程序多好玩～',
|
|
|
- };
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 创建map对象
|
|
|
- this.map = uni.createMapContext('map');
|
|
|
- // 获取屏幕高度
|
|
|
- uni.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.windowHeight = res.windowHeight;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.setNavTop('.navBox')
|
|
|
-
|
|
|
- this.polyline = [{
|
|
|
- points: this.coordinate,
|
|
|
- color: '#025ADD',
|
|
|
- width: 4,
|
|
|
- dottedLine: false,
|
|
|
- }];
|
|
|
},
|
|
|
methods: {
|
|
|
- setNavTop(style) {
|
|
|
- let view = uni.createSelectorQuery().select(style);
|
|
|
- view
|
|
|
- .boundingClientRect(data => {
|
|
|
- console.log("tabInList基本信息 = " + data.height);
|
|
|
- this.mapHeight = this.windowHeight - data.height;
|
|
|
- console.log(this.mapHeight)
|
|
|
- })
|
|
|
- .exec();
|
|
|
- },
|
|
|
- start() {
|
|
|
- this.isStart = true;
|
|
|
- this.isDisabled = true;
|
|
|
- let data = this.coordinate;
|
|
|
- let len = data.length;
|
|
|
- let datai = data[this.playIndex];
|
|
|
- let _this = this;
|
|
|
+ //模拟获取远程数据
|
|
|
+ getTrack() {
|
|
|
|
|
|
- _this.map.translateMarker({
|
|
|
- markerId: 1,
|
|
|
- autoRotate:true,
|
|
|
- destination: {
|
|
|
- longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
|
|
|
- latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
|
|
|
- },
|
|
|
- duration: 700,
|
|
|
- complete: function(){
|
|
|
- _this.playIndex++;
|
|
|
- if(_this.playIndex < len){
|
|
|
- _this.start(_this.playIndex, data);
|
|
|
- }else{
|
|
|
- console.log('okokok');
|
|
|
- uni.showToast({
|
|
|
- title: '播放完成',
|
|
|
- duration: 1400,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- _this.playIndex = 0;
|
|
|
- _this.isStart = false;
|
|
|
- _this.isDisabled = false;
|
|
|
- }
|
|
|
- },
|
|
|
- animationEnd: function() {
|
|
|
- // 轨迹回放完成 处理H5端
|
|
|
- _this.playIndex++;
|
|
|
- if(_this.playIndex < len){
|
|
|
- _this.start(_this.playIndex, data);
|
|
|
- }else{
|
|
|
- console.log('okokok');
|
|
|
- uni.showToast({
|
|
|
- title: '播放完成',
|
|
|
- duration: 1400,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- _this.playIndex = 0;
|
|
|
- _this.isStart = false;
|
|
|
- _this.isDisabled = false;
|
|
|
+ uni.request({
|
|
|
+ url: baseUrl + '/hyOrderTravelPath/getInfo',
|
|
|
+ data: {
|
|
|
+ orderId: this.id
|
|
|
+ },
|
|
|
+ method: 'get',
|
|
|
+ header: {
|
|
|
+ 'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log(res.data,11111111)
|
|
|
+ if(res.data.code==200){
|
|
|
+ if(res.data.data){
|
|
|
+ if(res.data.data.longitudeLatitude){
|
|
|
+ // console.log(JSON.parse(res.data.data.longitudeLatitude));
|
|
|
+ this.polyline[0].points =JSON.parse(res.data.data.longitudeLatitude)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂无运输轨迹',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- // 轨迹回放失败
|
|
|
- },
|
|
|
- });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.$request.baseRequest('post', '/hyOrderTravelPath/getInfo', {
|
|
|
+ // orderId: this.id,
|
|
|
+ // }).then(res => {debugger
|
|
|
+ // 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}
|
|
|
+ // // ]
|
|
|
+ // // for(var i =0 ;i<7200;i++){
|
|
|
+ // // var latitude = this.polyline[0].points[this.polyline[0].points.length -1].latitude + 0.0001
|
|
|
+ // // var longitude = this.polyline[0].points[this.polyline[0].points.length -1].longitude + 0.0001
|
|
|
+ // // this.polyline[0].points.push({latitude,longitude})
|
|
|
+ // // }
|
|
|
+ var that = this
|
|
|
+ setTimeout(()=>{
|
|
|
+ that.durationTime = Math.ceil(30000 / that.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
|
|
|
+ that.initMapData()
|
|
|
+ },1000)
|
|
|
+
|
|
|
+ // })
|
|
|
+ // .catch(res => {
|
|
|
+ // uni.hideLoading()
|
|
|
+ // uni.showToast({
|
|
|
+ // title: res.message,
|
|
|
+ // icon: 'none',
|
|
|
+ // duration: 2000
|
|
|
+ // })
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ //设置地图
|
|
|
+ initMapData() {
|
|
|
+ this.initMarkers()
|
|
|
+ this.mapContext = uni.createMapContext('myMap', this)
|
|
|
+
|
|
|
+ },
|
|
|
+ test() {
|
|
|
+ // console.log("1111111111111111")
|
|
|
+ this.mapContext.includePoints({
|
|
|
+ points: this.polyline[0].points,
|
|
|
+ padding: [100, 100, 1000, 100]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //设置位置（从起点开始）
|
|
|
+ initMarkers() {
|
|
|
+ console.log(this.polyline[0])
|
|
|
+ this.markers[0].latitude = this.polyline[0].points[0].latitude
|
|
|
+ this.markers[0].longitude = this.polyline[0].points[0].longitude
|
|
|
},
|
|
|
+ //开始移动
|
|
|
+ handleStartMove() {
|
|
|
+
|
|
|
+ console.log("222222")
|
|
|
+ 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
|
|
|
+ */
|
|
|
+ console.log(this.mapContext)
|
|
|
+ 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
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .btnBox {
|
|
|
+ .hcp-bottom {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
width: 750rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 60rpx;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ position: fixed;
|
|
|
}
|
|
|
</style>
|
