轨迹实现

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

@@ -241,14 +241,14 @@ export default {
           offset: new AMap.Pixel(-100, -100),
         });
         this.wllabel.setPosition( this.lineArr[this.lineArr.length-1]);
-        this.wllabel.setContent("<div style='border:3px dashed #0925b6; width: 200px'>时间："+ this.lineArrSj[this.lineArr.length-1]+"<br/>"+this.lineArrAdree[this.lineArr.length-1]+"</div>");
+        this.wllabel.setContent("<div style='border:3px dashed #0925b6; width: 200px;color: blue'>时间："+ this.lineArrSj[this.lineArr.length-1]+"<br/>"+this.lineArrAdree[this.lineArr.length-1]+"</div>");
 
         this.wllabel.setMap(this.map);
         this.marker.on('moving',  (e) => {
           this.passedPolyline.setPath(e.passedPath);
           this.map.setCenter(e.target.getPosition(),true);
           this.wllabel.setPosition(e.target.getPosition());
-          this.wllabel.setContent("<div style='border:3px dashed #0925b6; width: 200px'>时间："+ this.lineArrSj[e.index]+"<br/>"+this.lineArrAdree[e.index]+"</div>");
+          this.wllabel.setContent("<div style='border:3px dashed #0925b6; width: 200px;color: blue'>时间："+ this.lineArrSj[e.index]+"<br/>"+this.lineArrAdree[e.index]+"</div>");
 
         });
         if (this.gjlx=="gj")
@@ -346,17 +346,26 @@ export default {
                   imageSize: new AMap.Size(46, 52) //图标大小
                 }),
                 offset: new AMap.Pixel(-23, -26),
+                draggable: true,
+                extData: {
+                  oldpos: [this.bjdata[i][4], this.bjdata[i][5]],
+                },
                 onclick:this.markerClick,
               });
 
               marker.setExtData({
                 wl:wldata,
+                oldpos: [this.bjdata[i][4], this.bjdata[i][5]],
                 nr: "类型："+this.bjdata[i][3]+"<br/>时间："+this.bjdata[i][1]+"<br/>地址："+this.bjdata[i][6],
               })
               marker.on('click', this.markerClick);
+              marker.on('dragstart',this.handleMarkerDragging);
+              marker.on('dragging', this.handleMarkerDragStart);
+              marker.on('dragend', this.handleMarkerDragEnd);
               marker.on("rightclick", function (e) {
-                e.target.setPosition([e.target.getPosition().lng,e.target.getPosition().lat-0.0005]);
-
+               // e.target.setPosition([e.target.getPosition().lng,e.target.getPosition().lat-0.0005]);
+                console.log(e.target._opts.extData)
+                e.target.setPosition(e.target.getExtData().oldpos);
                // window.wlsmap.remove(e.target);
               })
             }
@@ -395,6 +404,27 @@ export default {
 
   return [Lng * 180 / Math.PI, Lat * 180 / Math.PI];
 
+},
+    handleMarkerDragging(e){
+  // console.log(event)
+  const oldpos =  e.target.getExtData().oldpos;  // 在新建 marker 的时候提前定义的数据
+  console.log(oldpos);
+  console.log([e.lnglat.lng, e.lnglat.lat]);
+  //  pointers.value[markerIndex].position = [event.lnglat.lng, event.lnglat.lat]
+},
+handleMarkerDragStart(e){
+  // console.log(event)
+  const oldpos =  e.target.getExtData().oldpos;  // 在新建 marker 的时候提前定义的数据
+  console.log(oldpos);
+  console.log([e.lnglat.lng, e.lnglat.lat]);
+  // pointers.value[markerIndex].position = [event.lnglat.lng, event.lnglat.lat]
+},
+handleMarkerDragEnd(e){
+  // console.log(event)
+  const oldpos =  e.target.getExtData().oldpos;  // 在新建 marker 的时候提前定义的数据
+  console.log(oldpos);
+  console.log([e.lnglat.lng, e.lnglat.lat]);
+  // pointers.value[markerIndex].position = [event.lnglat.lng, event.lnglat.lat]
 },
     markerClick(e) {
       this.map.remove(this.wlMaker);