edit

src/app/routes/financial-management/components/payment-record/payment-record.component.ts

@@ -82,7 +82,7 @@ export class PaymentRecordComponent implements OnInit {
             hidden: true
           }
         },
-        orderSn: {
+        orderPaymentCode: {
           type: 'string',
           title: '支付编号',
           ui: {

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

@@ -348,7 +348,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"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

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

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

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

@@ -322,7 +322,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"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

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

@@ -218,7 +218,7 @@
           </st>
         </div>
         <div nz-col [nzSpan]="12">
-          <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="mapList" [pois]="pois"></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/modal/vehicle/view-track/view-track.component.html

@@ -16,7 +16,7 @@
            </st>
         </div>
         <div style="flex: 1;" >
-          <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [MapList]="MapList"></amap-path-simplifier>
+          <amap-path-simplifier [mapWidth]="'100%'" [mapHeight]="'600px'" [mapList]="MapList"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

src/app/routes/waybill-management/components/bulk-detail/bulk-detail.component.html

@@ -236,7 +236,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"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

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

@@ -216,7 +216,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"></amap-path-simplifier>
         </div>
       </div>
     </nz-card>

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

@@ -3,6 +3,7 @@ import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitte
 import { amapConf } from '@conf/amap.config';
 import { throwError } from 'rxjs';
 import { BaseService } from 'src/app/shared/services';
+import { InfoItem, MapList, PathList, POI } from '../amap.service';
 declare var AMap: any;
 declare var AMapUI: any;
 declare var Loca: any;
@@ -21,41 +22,49 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   infoWindow: any;
   markerList: any;
   SimpleMarker: any;
+  // 简单路径信息
   @Input()
-  pathList: any = [];
+  mapList: MapList[] = [];
+  // 完整路线图信息
+  @Input()
+  pathList: PathList[] = [];
+  // 当前选中路线图下标
   @Input()
   selectedIndex = 0;
+  // 标点数组
+  @Input()
+  pois: POI[] = [];
+  private _pois: any = [];
+
   @Input()
   mapWidth = '800px';
-  @Input() MapList: any;
   @Input()
   mapHeight = '500px';
 
   @Output()
   readonly clcikPointEvent = new EventEmitter<any>();
 
-  @Input()
-  pois: any = [];
-  private _pois: any = [];
-
   constructor(public service: BaseService) {}
   ngOnChanges(changes: SimpleChanges): void {
+    // 路线图变更: 设置路线图, 指定路线图
     if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
       this.setData(changes.pathList?.currentValue);
       this.setPathIndex(this.selectedIndex);
     }
-    if (changes?.MapList?.currentValue && this?.pathSimplifierIns && changes.MapList?.currentValue.length > 0) {
+    // 路径信息变更: 更新路线图, 设置路线图, 指定路线图, 获取终点地址信息并标点
-      // console.log(this.MapList);
+    if (changes?.mapList?.currentValue && this?.pathSimplifierIns && changes.mapList?.currentValue.length > 0) {
+      // console.log(this.mapList);
       this.pathList = [
         {
           name: '路线1',
-          points: changes.MapList?.currentValue
+          points: changes.mapList?.currentValue
         }
       ];
       this.setData(this.pathList);
       this.setPathIndex(this.selectedIndex);
-      this.getPoiByPositon(this.MapList[this.MapList?.length - 1]?.lnglat);
+      this.getPoiByPositon(this.mapList[this.mapList?.length - 1]?.lnglat);
     }
+    // 标点列表变更: 更新标点数据, 绘画标点
     if (changes?.pois?.currentValue) {
       // console.log(this.pois);
       this._pois = changes?.pois?.currentValue;
@@ -68,11 +77,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
     this.mapInit();
   }
   ngOnDestroy(): void {
+    // 销毁地图数据
     if (this.aMap) {
       this.aMap.destroy();
     }
   }
 
+  /** 地图初始化 */
   mapInit() {
     AMapLoader.load({
       key: CONFIG.key,
@@ -94,14 +105,15 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
         });
 
         this.aMap.on('complete', () => {
+          // this.service.msgSrv.info('地图加载完成 !');
           // 信息窗口
           this.infoWindow = new AMap.InfoWindow({
             offset: new AMap.Pixel(0, -40)
           });
+          // 初始化定位工具
           this.geocoder = new AMap.Geocoder({
-            radius: 1000 //范围，默认：500
+            radius: 500 //范围，默认：500
           });
-          // this.service.msgSrv.info('地图加载完成 !');
           this.pathInit();
           this.setPOIS();
         });
@@ -111,34 +123,20 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
       });
   }
 
+  /** 初始化路径工具 */
   pathInit() {
     this.pathSimplifierIns = new AMapUI.PathSimplifier({
       zIndex: 100,
       //autoSetFitView:false,
-      map: this.aMap, //所属的地图实例
+      map: this.aMap,
-
+      // 重组路径数据
-      getPath: function (pathData: any, pathIndex: any) {
+      getPath: (pathData: PathList, pathIndex: number) => pathData.points.map(points => points.lnglat),
-        var points = pathData.points,
+      // 鼠标悬浮事件
-          lnglatList = [];
+      getHoverTitle: (pathData: PathList, pathIndex: number, pointIndex: number) => '',
-
-        for (var i = 0, len = points?.length; i < len; i++) {
-          lnglatList.push(points[i].lnglat);
-        }
-
-        return lnglatList;
-      },
-      getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
-        if (pointIndex >= 0) {
-          //point
-          return `${pathData.name},${pathData.points[pointIndex].name}`;
-        }
-        return '';
-      },
       renderOptions: {
-        renderAllPointsIfNumberBelow: 10 //绘制路线节点，如不需要可设置为-1
+        renderAllPointsIfNumberBelow: 20 //绘制路线节点，如不需要可设置为-1
       }
     });
-    (window as any).pathSimplifierIns = this.pathSimplifierIns;
     this.setData(this.pathList);
 
     if (this.pathList.length > 0) {
@@ -147,26 +145,39 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
 
     this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
       this.clcikPointEvent.emit({ e, info });
-      console.log(`Click: ${info.pathData.points[info.pointIndex].name}`);
+      // 弹出信息窗口
+      if (info) {
+        this.geocoder.getAddress(info.pathData.points[info.pointIndex].lnglat, (status: any, result: any) => {
+          if (status === 'complete' && result.info === 'OK') {
+            // result中对应详细地理坐标信息
+            this.selectedPOI({
+              position: info.pathData.points[info.pointIndex].lnglat,
+              content: `
+              <label style="font-weight: bold;">${result.regeocode.formattedAddress}<label/><br/>
+              <label style="font-weight: 400;">车速: ${info.pathData.points[info.pointIndex].name}<label/>
+              `
+            });
+          }
+        });
+      }
     });
   }
 
+  /** 初始化标点工具 */
   setPOIS() {
     AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
       this.markerList = new MarkerList({
         //关联的map对象
         map: this.aMap,
         //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
-        getPosition: (dataItem: any) => {
+        getPosition: (dataItem: POI) => dataItem.position,
-          return dataItem.position;
-        },
         //返回数据项对应的Marker
-        getMarker: (dataItem: any, context: any, recycledMarker: any) => {
+        getMarker: (dataItem: POI, context: any, recycledMarker: any) => {
           //存在可回收利用的marker
           if (recycledMarker) {
             //直接更新内容返回
             recycledMarker.setIconLabel(context.id);
-            recycledMarker.setIconStyle(dataItem.iconStyle);
+            recycledMarker.setIconStyle(dataItem.color);
             return recycledMarker;
           }
           this.SimpleMarker = SimpleMarker;
@@ -189,7 +200,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
           });
         },
         //返回数据项对应的infoWindow
-        getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
+        getInfoWindow: (dataItem: POI, context: any, recycledInfoWindow: any) => {
           this.selectedPOI(dataItem);
           return null;
         }
@@ -202,15 +213,26 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
     });
   }
 
-  setData(pathList: any[]) {
+  /**
+   * 设置路线图数据
+   * @param pathList
+   */
+  setData(pathList: PathList[]) {
     this.pathSimplifierIns.setData(pathList);
   }
 
+  /**
+   * 指定路线图
+   * @param index
+   */
   setPathIndex(index: number) {
     this.pathSimplifierIns.setSelectedPathIndex(index);
     this.startNav();
   }
 
+  /**
+   * 开启巡航
+   */
   startNav() {
     if (this.navigator) {
       this.navigator.start();
@@ -223,7 +245,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
     }
   }
 
-  /** 根据经纬度获取地址信息 */
+  /** 根据标点经纬度获取地址信息 */
   getPoiByPositon(position: string[]) {
     this.geocoder.getAddress(position, (status: any, result: any) => {
       if (status === 'complete' && result.info === 'OK') {
@@ -232,7 +254,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
         if (this.markerList) {
           this.markerList.render(this._pois);
         }
-        // this.setPOI({ markerLabel: '终', color: 'red', position: position });
       }
     });
   }
@@ -240,45 +261,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   /**
    * 选中标点，设置窗口信息
    *
-   * @param location
+   * @param infoItem
    */
-  selectedPOI(location: any) {
+  selectedPOI(infoItem: InfoItem) {
-    this.infoWindow.setContent(`地址: <pre>${location.title}</pre>`);
+    this.infoWindow.setContent(infoItem.content || `地址: <pre>${infoItem.title}</pre>`);
-    this.infoWindow.open(this.aMap, location.position);
+    this.infoWindow.open(this.aMap, infoItem.position);
-    this.infoWindow.setPosition(location.position);
+    this.infoWindow.setPosition(infoItem.position);
-    this.aMap.setCenter(location.position);
+    // 地图定位居中
-  }
+    this.aMap.setCenter(infoItem.position);
-
-  /**
-   * 增加标记点
-   *
-   * @param poi
-   */
-  setPOI(poi: POI) {
-    AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
-      //启动页面
-      new SimpleMarker({
-        //普通文本
-        iconLabel: {
-          //普通文本
-          innerHTML: poi.markerLabel,
-          //设置样式
-          style: {
-            color: '#fff',
-            fontSize: '110%',
-            marginTop: '2px'
-          }
-        },
-        iconStyle: poi.color,
-        map: this.aMap,
-        position: poi.position
-      });
-    });
   }
 }
-
-export interface POI {
-  markerLabel: string;
-  color: string;
-  position: string[];
-}

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

@@ -13,6 +13,7 @@ import { Observable, Subject, throwError } from 'rxjs';
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { amapConf } from '@conf/amap.config';
 declare var AMap: any;
+declare var AMapUI: any;
 
 const CONFIG = amapConf;
 @Injectable({
@@ -82,4 +83,55 @@ export class AmapService {
 
     return this.currentSub;
   }
+
+  /**
+   * 增加标记点
+   *
+   * @param poi
+   */
+  setPOI(poi: POI, aMap: any) {
+    AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
+      //启动页面
+      new SimpleMarker({
+        //普通文本
+        iconLabel: {
+          //普通文本
+          innerHTML: poi.markerLabel,
+          //设置样式
+          style: {
+            color: '#fff',
+            fontSize: '110%',
+            marginTop: '2px'
+          }
+        },
+        iconStyle: poi.color,
+        map: aMap,
+        position: poi.position
+      });
+    });
+  }
+}
+
+export interface POI {
+  markerLabel?: string;
+  title: string;
+  color: string;
+  position: string[];
+}
+
+export interface InfoItem {
+  title?: string;
+  content?: string;
+  position: string[];
+}
+
+export interface MapList {
+  name: string;
+  time: string;
+  lnglat: string[];
+}
+
+export interface PathList {
+  name: string;
+  points: MapList[];
 }