轨迹实现

ruoyi-ui/src/components/AmApN/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div  v-show="isShow">
     <div class="myclass" >
-      <div class="flex" >{{title}}<input v-if="gjlx==='gj'" style="margin-left: 400px;width:200px" v-model="rq"  type="date"  name="trip-start"
+      <div class="flex" >{{title}}<label style="margin-left: 30px;font-size: 18pt">{{title1}}</label><input v-if="gjlx==='gj'" style="margin-left: 400px;width:200px" v-model="rq"  type="date"  name="trip-start"
                                          value="2023-09-01" min="2023-09-01" max="2029-12-31"></div>
       <div id="mapTrack">
         <el-card class="box-card" shadow="never" :body-style="{ padding: '0' }">
@@ -101,6 +101,9 @@ export default {
       wllabel:{},
       wlMakers: [],
       gjlx:"qt",
+      lineArrSj:[],
+      title1:'',
+      lineArrAdree:[],
       lineArr: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],
     }
   },
@@ -128,6 +131,7 @@ export default {
     updata() {
       this.lineArr=[];
       this.lineArrSj=[];
+      this.lineArrAdree=[];
       if (this.marker)
       {
         this.marker.stopMove();
@@ -138,6 +142,7 @@ export default {
       }
       for (let i = 0; i <this.olddata.length ; i++) {
         this.lineArrSj.push(this.olddata[i][0]);
+        this.lineArrAdree.push(this.olddata[i][2]);
         let zz=[];
         if (this.olddata[i][1].split("：").length==3)
         {
@@ -229,7 +234,13 @@ export default {
         });
         this.marker.on('moving',  (e) => {
           this.passedPolyline.setPath(e.passedPath);
-          this.map.setCenter(e.target.getPosition(),true)
+          this.map.setCenter(e.target.getPosition(),true);
+          this.title1=this.lineArrSj[e.index];
+          this.marker.setLabel({
+            content:this.lineArrAdree[e.index],
+            direction: 'top',
+            offset: new AMap.Pixel(0, 20)
+          })
         });
         if (this.gjlx=="gj")
         {
@@ -439,7 +450,7 @@ export default {
         }
 
       }
-      infoWindow.setContent("<div>"+ e.target.getExtData().nr+"</div>");
+      infoWindow.setContent("<div style='background-color:skyblue'>"+ e.target.getExtData().nr+"</div>");
       infoWindow.open(this.map, e.target.getPosition());
     },
     startAnimation () {