123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <template>
- <view class="content">
- <map
- style="width: 100%; height: 100%;position: fixed;"
- :markers="covers"
- :polyline="polyline"
- :include-points="covers"
- @markertap="showRoute"
- id="myMap"
- show-location
- ></map>
- <slider :value="progress" @change="sliderChange" @changing="trackState = 2" activeColor="#FFD090" block-color="#D65600" />
- <view class="fn">
- <button @tap="trackState = trackState == 1 ? 2 : 1">{{ ['开始', '暂停', '继续'][trackState] }}</button>
- <button @tap="trackState = 0">终止</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'xbdMaptrack',
- props: ['isauto', 'covers', 'polyline'],
- data() {
- return {
- trackLength: 0,
- trackkey: 0,
- progress: 0,
- mapContext: '',
- terval: false,
- trackState: 0
- };
- },
- watch: {
- trackState(k) {
-
- if (k == 1 && !this.terval) return this.trackplay();
- clearInterval(this.terval);
- this.terval = false;
-
- this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
- if (k !== 0) return;
- this.trackkey = 0;
- this.progress = 0;
- this.trackMove();
- },
- },
- created() {
- this.mapContext = uni.createMapContext('myMap', this);
- setTimeout(() => {
-
- this.trackLength = this.polyline[0].points.length - 1;
- this.mapContext.moveToLocation(this.covers[0]);
- if (this.isauto) this.trackState = 1;
- }, 888);
- },
- methods: {
-
- trackplay(s = 10) {
- this.terval = setInterval(() => {
- this.trackkey++;
- if (this.trackkey >= this.trackLength) {
- clearInterval(this.terval);
- this.trackState = 0;
- this.trackkey = 0;
- this.terval = false;
- }
- this.progress = ((this.trackkey * 100) / this.trackLength).toFixed(1);
- this.trackMove();
- }, s);
- },
-
- trackMove(markerId = 2, destination = this.polyline[0].points[this.trackkey], duration = 100, animationEnd = () => {}, fail = e => console.log('轨迹回放失败', e)) {
- this.mapContext.translateMarker({
- markerId,
- destination,
- duration,
- animationEnd,
- fail
- });
- },
-
- sliderChange(e) {
- this.trackkey = ((e.detail.value / 100) * this.trackLength).toFixed(0);
-
- this.$emit('getStopTrack',{key:this.trackkey,track:this.polyline[0].points[this.trackkey]})
- }
- }
- };
- </script>
- <style>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
- .text-area {
- display: flex;
- justify-content: center;
- }
- .fn {
- position: fixed;
- bottom: 22%;
- text-align: center;
- z-index: 100;
- }
- .title {
- font-size: 36rpx;
- color: #8f8f94;
- }
- slider {
- width: 88%;
- height: 12px;
- margin-left: 2.5%;
- }
- </style>
|