地图轨迹

This commit is contained in:
tx 2024-08-23 18:12:16 +08:00
parent 18870b33f2
commit e60046b7fe
2 changed files with 94 additions and 2 deletions

View File

@ -4,6 +4,17 @@
<el-row class="search-row" :gutter="8" type="flex">
</el-row>
<div id="panel"></div>
<div class="input-card">
<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>
</template>
<script>
@ -180,7 +191,7 @@ export default {
});
},
trajectory() {
console.log('轨迹调用了',this.tripRouteStr);
console.log('轨迹调用了11',this.tripRouteStr);
this.line = JSON.parse(this.tripRouteStr)
console.log("this.line================" + this.line)
let abb;
@ -581,6 +592,21 @@ export default {
let center = this.map.getCenter();
this.doSearchNearBy(keyword, center.lng, center.lat, 1000);
},
startAnimation() {
this.marker.moveAlong(this.line, {
//
duration: 200,//
});
},
pauseAnimation() {
this.marker.pauseMove();
},
resumeAnimation() {
this.marker.resumeMove();
},
stopAnimation() {
this.marker.stopMove();
},
//
onInputSearch: debounce(function () {
this.doPlaceSearch(this.keyword)
@ -596,6 +622,69 @@ export default {
.search-row {
margin: 0.5em;
}
.input-card .btn {
margin-right: 1.2rem;
width: 9rem;
}
.input-card .btn:last-child {
margin-right: 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25A5F7;
border-color: #25A5F7;
padding: .25rem .5rem;
line-height: 1.5;
border-radius: 1rem;
// -webkit-appearance: button;
cursor: pointer;
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 3rem;
}
.input-card {
position: absolute !important;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
width: 22rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
#container {
position: absolute;
left: 0;

View File

@ -1472,7 +1472,10 @@ export default {
gettrajectory(data).then((response) => {
this.tripRouteStr = response.data;
// this.re
this.$refs.map.trajectory();
setTimeout(() => {
this.$refs.map.trajectory();
}, 600);
// console.log(this.tripRouteStr,'this.tripRouteStr');
});