|
@@ -7,20 +7,20 @@
|
|
|
lock-scroll
|
|
|
width="80%">
|
|
|
<div id="container" v-if="dialogVisible"></div>
|
|
|
-<!-- <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">-->
|
|
|
-<!-- <h4>轨迹回放控制</h4>-->
|
|
|
-<!-- <div class="input-item">-->
|
|
|
-<!-- <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>-->
|
|
|
-<!-- <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="input-item">-->
|
|
|
-<!-- <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>-->
|
|
|
-<!-- <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>-->
|
|
|
-<!-- <span style="color: red">暂无该车辆轨迹信息</span>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-if="this.lineArr.length>0">
|
|
|
+ <h4>轨迹回放控制</h4>
|
|
|
+ <div class="input-item">
|
|
|
+ <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()"/>
|
|
|
+ <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()"/>
|
|
|
+ </div>
|
|
|
+ <div class="input-item">
|
|
|
+ <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()"/>
|
|
|
+ <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-card" style="right: 10.3%;bottom: 10.3%" v-else>
|
|
|
+ <span style="color: red">暂无该车辆轨迹信息</span>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
@@ -58,16 +58,6 @@ export default {
|
|
|
image: 'https://trade.tubaosoft.com/file/bladex/000000/1123598821738675201/che.png',
|
|
|
imageSize: new AMap.Size(52, 26), // 根据所设置的大小拉伸或压缩图片
|
|
|
});
|
|
|
- this.marker = new AMap.Marker({
|
|
|
- map: this.map,
|
|
|
- position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
|
|
|
- // icon: "https://webapi.amap.com/images/car.png",
|
|
|
- icon: icon,
|
|
|
- markerMeta: new AMap.Size(28, 28),
|
|
|
- offset: new AMap.Pixel(-26, -15),
|
|
|
- autoRotation: true,
|
|
|
- angle: -15
|
|
|
- });
|
|
|
// 绘制轨迹
|
|
|
let polyline = new AMap.Polyline({
|
|
|
map: this.map,
|
|
@@ -95,8 +85,6 @@ export default {
|
|
|
position: this.parkingPoint[i].location,
|
|
|
map: this.map
|
|
|
});
|
|
|
- // (this.parkingPoint[i].ete - this.parkingPoint[i].bte)
|
|
|
- // console.log(this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete));
|
|
|
let fun = this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)==='获取失败'?'':this.fun(this.parkingPoint[i].bte, this.parkingPoint[i].ete)
|
|
|
this.marker.content = '<div style="width: 300px;">'
|
|
|
+ '<p style="font-size: 22px;font-weight: bold;background-color: #2d8cf0;color: #fff;">' + fun + '</p>'
|
|
@@ -107,6 +95,16 @@ export default {
|
|
|
this.marker.emit('click', {target: this.marker});
|
|
|
}
|
|
|
}
|
|
|
+ this.marker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: this.lineArr.length >0 ?this.lineArr[this.lineArr.length - 1]:[120.382891,36.066460],
|
|
|
+ // icon: "https://webapi.amap.com/images/car.png",
|
|
|
+ icon: icon,
|
|
|
+ markerMeta: new AMap.Size(28, 28),
|
|
|
+ offset: new AMap.Pixel(-26, -15),
|
|
|
+ autoRotation: true,
|
|
|
+ angle: -15
|
|
|
+ });
|
|
|
this.map.setFitView();
|
|
|
},
|
|
|
fun(startTime,endTime) {
|