edit

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.html

@@ -203,7 +203,7 @@
           </st>
         </div>
         <div nz-col [nzSpan]="12">
-          <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList"></amap-path-simplifier>
+          <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList" [pois]="pois"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

src/app/routes/order-management/components/vehicle-detail/vehicle-detail.component.ts

@@ -25,6 +25,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
   id = this.route.snapshot.params.id;
   trajectory = 'car';
   mapList: any[] = []; //地图点位数据组
+  pois: any[] = [];
   addressItems: any[] = []; //打点地址数据组
   i: any = {
     unLoadingPlaceList: [],
@@ -40,7 +41,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
   isVisible = false;
   logColumns2: STColumn[] = [
     { title: '时间', index: 'vinOutTime' },
-    { title: '地点', index: 'cityName' },
+    { title: '地点', index: 'cityName' }
   ];
   logColumns: STColumn[] = [
     { title: '款项', index: 'expenseCodeLabel' },
@@ -72,15 +73,33 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
 
   ngOnInit(): void {
     this.initData();
-    this.getTrajectory()
+    this.getTrajectory();
   }
 
   initData() {
     this.service.request(this.service.$api_get_getWholeBillDetail, { id: this.id }).subscribe(res => {
       if (res) {
+        console.log(res);
+
         this.i = res;
-        this.billExpenses = this.i?.billExpenseDetails?.filter((data:any)=>data.expenseCode ==="PRE" || data.expenseCode ==="RECE" ||data.expenseCode ==="BACK" )
+        this.pois = [
-        this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data:any)=>data.displayStatus !=="HIDE");
+          {
+            markerLabel: '起',
+            color: 'blue',
+            position: [res.startingPoint.longitude, res.startingPoint.latitude],
+            title: res.startingPoint.detailedAddress
+          },
+          {
+            markerLabel: '终',
+            color: 'red',
+            position: [res.endPoint.longitude, res.endPoint.latitude],
+            title: res.endPoint.detailedAddress
+          }
+        ];
+        this.billExpenses = this.i?.billExpenseDetails?.filter(
+          (data: any) => data.expenseCode === 'PRE' || data.expenseCode === 'RECE' || data.expenseCode === 'BACK'
+        );
+        this.i.scheduleVOList = this.i?.scheduleVOList?.filter((data: any) => data.displayStatus !== 'HIDE');
       }
     });
   }
@@ -175,7 +194,7 @@ export class OrderManagementVehicleDetailComponent implements OnInit {
   }
   trajectoryChange(event: any) {
     if (event === 'car') {
-      this.getTrajectory()
+      this.getTrajectory();
     } else if (event === 'driver') {
       this.getDriverTrajectory();
     }

src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts

@@ -17,6 +17,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
   aMap: any;
   pathSimplifierIns: any;
   navigator: any;
+  infoWindow: any;
+  markerList: any;
   @Input()
   pathList: any = [];
   @Input()
@@ -31,40 +33,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
   clcikPointEvent = new EventEmitter<any>();
 
   @Input()
-  pois: any = [
+  pois: any = [];
-    {
-      id: 'A',
-      position: [116.020764, 39.904989],
-      markerLabel: 'X_A',
-      infoWinContent: 'Hello! A',
-      listDesc: '起',
-      color: '#F5222D'
-    },
-    {
-      id: 'B',
-      position: [116.405285, 39.904989],
-      markerLabel: 'X_B',
-      infoWinContent: 'Hello! B',
-      listDesc: '终',
-      color: '#1890ff'
-    },
-    {
-      id: 'C',
-      position: [116.789806, 39.904989],
-      markerLabel: 'X_C',
-      infoWinContent: 'Hello! C',
-      listDesc: '卸',
-      color: '#1890ff'
-    },
-    {
-      id: 'C',
-      position: [116.789806, 39.904989],
-      markerLabel: 'X_C',
-      infoWinContent: 'Hello! C',
-      listDesc: '装',
-      color: '#F5222D'
-    }
-  ];
 
   constructor(public service: BaseService) {}
   ngOnChanges(changes: SimpleChanges): void {
@@ -73,7 +42,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
       this.setPathIndex(this.selectedIndex);
     }
     if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
-      console.log(this.MapList);
+      // console.log(this.MapList);
       this.pathList = [
         {
           name: '路线1',
@@ -83,6 +52,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
       this.setData(this.pathList);
       this.setPathIndex(this.selectedIndex);
     }
+    if (changes?.pois?.currentValue && this?.markerList && changes.pois?.currentValue.length > 0) {
+      // console.log(this.pois);
+      this.pois = changes?.pois?.currentValue;
+      this.markerList.render(this.pois);
+    }
   }
   ngOnInit(): void {
     this.mapInit();
@@ -99,7 +73,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
       version: CONFIG.version,
       plugins: [
         // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        'AMap.PathSimplifier'
+        'AMap.PathSimplifier',
+        'AMap.InfoWindow'
       ],
       AMapUI: {
         version: CONFIG.AMapUIVersion,
@@ -112,10 +87,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
         });
 
         this.aMap.on('complete', () => {
+          // 信息窗口
+          this.infoWindow = new AMap.InfoWindow({
+            offset: new AMap.Pixel(0, -40)
+          });
           // this.service.msgSrv.info('地图加载完成 !');
           this.pathInit();
-          // this.setPOIS();
+          this.setPOIS();
-          // this.loadPOIS();
         });
       })
       .catch(e => {
@@ -123,88 +101,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
       });
   }
 
-  loadPOIS() {
-    AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker: any) => {
-      if (!SvgMarker.supportSvg) {
-        //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
-        alert('当前环境不支持SVG');
-      }
-
-      //just some colors
-      var colors = ['#F5222D', '#1890ff'];
-
-      //SvgMarker.Shape下的Shape
-      var shapeKeys = ['WaterDrop'];
-
-      var colNum = 2,
-        rowNum = shapeKeys.length;
-      const markers: any[] = [];
-
-      this.pois.forEach((d: any) => {
-        //创建shape
-        const shape = new SvgMarker.Shape['WaterDrop']({
-          height: 40,
-          strokeWidth: 1,
-          strokeColor: '#ccc',
-          fillColor: '#F5222D'
-        });
-
-        markers.push(
-          new SvgMarker(shape, {
-            map: this.aMap,
-            position: d.position,
-            containerClassNames: 'shape-' + 'WaterDrop',
-            iconLabel: {
-              innerHTML: d.listDesc,
-              style: {
-                top: 7 + 'px'
-              }
-            },
-            showPositionPoint: true
-          })
-        );
-      });
-      console.log(markers);
-
-      // var pxCenter = this.aMap.lnglatToPixel(this.aMap.getCenter());
-
-      // var startX = pxCenter.getX(),
-      //   startY = pxCenter.getY();
-
-      // for (var c = 0; c < colNum; c++) {
-      //   for (var r = 0; r < rowNum; r++) {
-      //     var idx = r * colNum + c;
-
-      //     if (!colors[idx]) {
-      //       continue;
-      //     }
-
-      //     var x = startX + (c - colNum / 2) * 70;
-      //     var y = startY + 50 + (r - rowNum / 2) * 80;
-
-      //     var labelCenter = shape.getCenter();
-
-      //     var position = this.aMap.pixelToLngLat(new AMap.Pixel(x, y));
-
-      //     markers.push(
-      //       new SvgMarker(shape, {
-      //         map: this.aMap,
-      //         position: position,
-      //         containerClassNames: 'shape-' + shapeKeys[r],
-      //         iconLabel: {
-      //           innerHTML: String.fromCharCode('A'.charCodeAt(0) + c),
-      //           style: {
-      //             top: labelCenter[1] - 9 + 'px'
-      //           }
-      //         },
-      //         showPositionPoint: true
-      //       })
-      //     );
-      //   }
-      // }
-    });
-  }
-
   pathInit() {
     this.pathSimplifierIns = new AMapUI.PathSimplifier({
       zIndex: 100,
@@ -222,8 +118,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
         return lnglatList;
       },
       getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
-        console.log(pathData, pointIndex);
-
         if (pointIndex >= 0) {
           //point
           return pathData.name + '，' + pathData.points[pointIndex].name;
@@ -248,126 +142,53 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
   }
 
   setPOIS() {
-    AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => {
+    AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
-      var markerList = new MarkerList({
+      this.markerList = new MarkerList({
         //关联的map对象
         map: this.aMap,
-
-        //选中状态（通过点击列表或者marker）时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果
-        selectedClassNames: 'selected',
-
-        //返回数据项的Id
-        getDataId: (dataItem: any, index: any) => {
-          //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
-          return dataItem.id;
-        },
         //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
         getPosition: (dataItem: any) => {
-          console.log(dataItem);
-
           return dataItem.position;
         },
         //返回数据项对应的Marker
         getMarker: (dataItem: any, context: any, recycledMarker: any) => {
-          //marker的标注内容
-          var content = dataItem.markerLabel;
-
-          var label = {
-            offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
-            content: content
-          };
-
           //存在可回收利用的marker
           if (recycledMarker) {
             //直接更新内容返回
-            recycledMarker.setLabel(label);
+            recycledMarker.setIconLabel(context.id);
+            recycledMarker.setIconStyle(dataItem.iconStyle);
             return recycledMarker;
           }
 
           //返回一个新的Marker
-          return new AMap.Marker({
+          return new SimpleMarker({
-            label: label
+            //普通文本
+            iconLabel: {
+              //普通文本
+              innerHTML: dataItem.markerLabel,
+              //设置样式
+              style: {
+                color: '#fff',
+                fontSize: '110%',
+                marginTop: '2px'
+              }
+            },
+            iconStyle: dataItem.color,
+            map: this.aMap,
+            position: dataItem.position
           });
         },
         //返回数据项对应的infoWindow
         getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
-          var tpl = '<p><%- dataItem.id %>：<%- dataItem.infoWinContent %><p>';
+          this.selectedPOI(dataItem);
-
+          return null;
-          //MarkerList.utils.template支持underscore语法的模板
-          var content = MarkerList.utils.template(tpl, {
-            dataItem: dataItem,
-            dataIndex: context.index
-          });
-
-          if (recycledInfoWindow) {
-            //存在可回收利用的infoWindow, 直接更新内容返回
-            recycledInfoWindow.setContent(content);
-            return recycledInfoWindow;
-          }
-
-          //返回一个新的InfoWindow
-          return new AMap.InfoWindow({
-            offset: new AMap.Pixel(0, -32),
-            content: content
-          });
-        },
-        //返回数据项对应的列表节点
-        getListElement: (dataItem: any, context: any, recycledListElement: any) => {
-          var tpl = '<p><%- dataItem.id %>：<%- dataItem.listDesc %><p>';
-
-          var content = MarkerList.utils.template(tpl, {
-            dataItem: dataItem,
-            dataIndex: context.index
-          });
-
-          if (recycledListElement) {
-            //存在可回收利用的listElement, 直接更新内容返回
-            recycledListElement.innerHTML = content;
-            return recycledListElement;
-          }
-
-          //返回一段html，MarkerList将利用此html构建一个新的dom节点
-          return '<li>' + content + '</li>';
         }
       });
 
-      //监听选中改变
+      if (this.pois?.length > 0) {
-      markerList.on('selectedChanged', (event: any, info: any) => {
-        console.log(event, info);
-      });
-
-      //监听Marker和ListElement上的点击
-      markerList.on('markerClick listElementClick', (event: any, record: any) => {
-        //console.log(event, record);
-      });
-
-      //构建一个数据项数组，数据项本身没有格式要求，但需要支持getDataId和getPosition
-      var data = [
-        {
-          id: 'A',
-          position: [116.020764, 39.904989],
-          markerLabel: 'X_A',
-          infoWinContent: 'Hello! A',
-          listDesc: '店铺 A'
-        },
-        {
-          id: 'B',
-          position: [116.405285, 39.904989],
-          markerLabel: 'X_B',
-          infoWinContent: 'Hello! B',
-          listDesc: '店铺 B'
-        },
-        {
-          id: 'C',
-          position: [116.789806, 39.904989],
-          markerLabel: 'X_C',
-          infoWinContent: 'Hello! C',
-          listDesc: '店铺 C'
-        }
-      ];
-
         //展示该数据
-      markerList.render(data);
+        this.markerList.render(this.pois);
+      }
     });
   }
 
@@ -377,7 +198,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
 
   setPathIndex(index: number) {
     this.pathSimplifierIns.setSelectedPathIndex(index);
-    // this.startNav();
+    this.startNav();
   }
 
   startNav() {
@@ -391,4 +212,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
       this.navigator?.start();
     }
   }
+
+  selectedPOI(location: any) {
+    this.infoWindow.setContent(`地址: <pre>${location.title}</pre>`);
+    this.infoWindow.open(this.aMap, location.position);
+    this.infoWindow.setPosition(location.position);
+    this.aMap.setCenter(location.position);
+  }
 }

src/app/shared/components/amap/amap.service.ts

@@ -35,7 +35,10 @@ export class AmapService {
         return { keyword: item.detailedAddress, city: item.city };
       });
       driving.search(points, (status: any, result: any) => {
-        const repData = { distance: (result?.routes?.[0]?.distance / 1000).toFixed(2), time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2) };
+        const repData = {
+          distance: (result?.routes?.[0]?.distance / 1000).toFixed(2),
+          time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2)
+        };
         this.sub.next(repData);
       });
     });