edit

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

@@ -48,15 +48,18 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   @Output()
   readonly clcikPointEvent = new EventEmitter<any>();
 
-  constructor(public service: BaseService, private amapService: AmapService) {}
+  constructor(public service: BaseService, private amapService: AmapService) {
+    this.mapInit();
+  }
   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) {
+    if (changes?.mapList?.currentValue) {
       // console.log(this.mapList);
       this.pathList = [
         {
@@ -64,22 +67,30 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
           points: changes.mapList?.currentValue
         }
       ];
-      this.setData(this.pathList);
-      this.setPathIndex(this.selectedIndex);
-      this.getPoiByPositon(this.mapList[this.mapList?.length - 1]?.lnglat);
+      if (this?.pathSimplifierIns) {
+        this.setData(this.pathList);
+        if (changes.mapList?.currentValue.length > 0) {
+          this.setPathIndex(this.selectedIndex);
+          this.getPoiByPositon('起', this.mapList[0]?.lnglat, '时间：' + this.amapService.formatTime(this.mapList[0]?.time));
+          this.getPoiByPositon(
+            '终',
+            this.mapList[this.mapList?.length - 1]?.lnglat,
+            '时间：' + this.amapService.formatTime(this.mapList[this.mapList?.length - 1]?.time)
+          );
+        }
+      }
     }
     // 标点列表变更: 更新标点数据, 绘画标点
     if (changes?.pois?.currentValue) {
-      // console.log(this.pois);
+      console.log(changes?.pois?.currentValue);
+
       this._pois = changes?.pois?.currentValue;
       if (this?.markerList && this._pois.length > 0) {
         this.markerList.render(this._pois);
       }
     }
   }
-  ngOnInit(): void {
-    this.mapInit();
-  }
+  ngOnInit(): void {}
   ngOnDestroy(): void {
     // 销毁地图数据
     if (this.aMap) {
@@ -145,6 +156,12 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
 
     if (this.pathList.length > 0) {
       this.setPathIndex(this.selectedIndex);
+      this.getPoiByPositon('起', this.mapList[0]?.lnglat, '时间：' + this.amapService.formatTime(this.mapList[0]?.time));
+      this.getPoiByPositon(
+        '终',
+        this.mapList[this.mapList?.length - 1]?.lnglat,
+        '时间：' + this.amapService.formatTime(this.mapList[this.mapList?.length - 1]?.time)
+      );
     }
 
     this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
@@ -179,12 +196,13 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
         //返回数据项对应的Marker
         getMarker: (dataItem: POI, context: any, recycledMarker: any) => {
           //存在可回收利用的marker
-          if (recycledMarker) {
-            //直接更新内容返回
-            recycledMarker.setIconLabel(context.id);
-            recycledMarker.setIconStyle(dataItem.color);
-            return recycledMarker;
-          }
+          // if (recycledMarker) {
+          //   //直接更新内容返回
+          //   recycledMarker.setIconLabel(context.id);
+          //   recycledMarker.setIconStyle(dataItem.color);
+          //   return recycledMarker;
+          // }
+
           this.SimpleMarker = SimpleMarker;
           //返回一个新的Marker
           return new SimpleMarker({
@@ -212,6 +230,8 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
       });
 
       if (this._pois?.length > 0) {
+        console.log(this._pois);
+
         //展示该数据
         this.markerList.render(this._pois);
       }
@@ -241,7 +261,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   startNav() {
     this.navigator = this.pathSimplifierIns?.createPathNavigator(this.selectedIndex, {
       loop: true, //循环播放
-      speed: 500000 * this.navSpeed //巡航速度，单位千米/小时
+      speed: 50000 * this.navSpeed //巡航速度，单位千米/小时
     });
     this.navigator?.start();
   }
@@ -269,11 +289,14 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
   }
 
   /** 根据标点经纬度获取地址信息 */
-  getPoiByPositon(position: string[]) {
+  getPoiByPositon(label: string, position: string[], time: string) {
     this.geocoder.getAddress(position, (status: any, result: any) => {
       if (status === 'complete' && result.info === 'OK') {
         // result中对应详细地理坐标信息
-        this._pois = [...this.pois, { markerLabel: '终', color: 'red', position: position, title: result.regeocode.formattedAddress }];
+        this._pois = [
+          ...this.pois,
+          { markerLabel: label, color: 'red', position, title: result.regeocode.formattedAddress, time }
+        ];
         if (this.markerList) {
           this.markerList.render(this._pois);
         }
@@ -287,7 +310,14 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges, OnDestroy
    * @param infoItem
    */
   selectedPOI(infoItem: InfoItem) {
-    this.infoWindow.setContent(infoItem.content || `地址: <pre style="font-weight: bold;">${infoItem.title}</pre>`);
+    this.infoWindow.setContent(
+      infoItem.content ||
+        `
+    <label style="font-weight: bold;">${infoItem.title}</label><br/>
+    东经：${infoItem.position?.[0]}, 北纬：${infoItem.position?.[1]}<br/>
+    ${infoItem.time}
+    `
+    );
     this.infoWindow.open(this.aMap, infoItem.position);
     this.infoWindow.setPosition(infoItem.position);
     // 地图定位居中