地图轨迹

src/components/Map/location/LocationMaps.vue

@@ -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;

src/views/system/device/index.vue

@@ -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');
       });