使用Here Map显示装运的停靠点，其中使用装运ID获取这些停靠点的详细信息。从模态组件加载此处的Map。
jsmap-show-modal.component.html

<app-modal [title]="header">
  <ng-template appModalBody>
    <div><jsapp-map [shipmentId]="shipmentId"></jsapp-map></div>
  </ng-template>
</app-modal>

jsmap-show-modal.component.ts

import { Component, Inject, Input, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-jsmap-show-modal',
  templateUrl: './jsmap-show-modal.component.html',
  styleUrls: ['./jsmap-show-modal.component.scss']
})
export class JsMapShowModalComponent implements OnInit {
  public shipmentId: string;
  public header: string;
  constructor(@Inject(MAT_DIALOG_DATA) public data: any){
    console.log(data);
    this.header = data.header;
    this.shipmentId = data.shipmentId ;
  }
  ngOnInit() {}
}

在@NgModule指令中的entryComponents属性处的必要模块处声明jsModalComponent。
下面是jsmap.component.ts中的代码

@Component({
  selector: 'jsapp-map',
  templateUrl: './jsmap.component.html',
  styleUrls: ['./jsmap.component.scss']
})
export class JsmapComponent {
@Input() shipmentId: string;
  private platform: any;
  private map: any;
  private router: any;
  private locations: any;
  private waypoints: any;
  private tripId: string;

  constructor(
    private jsmapService: JsmapService,
    private route: ActivatedRoute) {
    this.platform = new H.service.Platform({
      apikey: <<MY_API_KEY>>
    });
  }

ngOnInit(): void {
    this.initializeMap();
    this.calculateRoute();
  }

initializeMap(): void {
    const defaultLayers = this.platform.createDefaultLayers();
    this.map = new H.Map(document.getElementById('mapContainer'), defaultLayers.vector.normal.map, {
      zoom: 10,
      center: { lat: 40.397694, lng: -105.073181 },
      pixelRatio: window.devicePixelRatio || 1
    });
    const ui = H.ui.UI.createDefault(this.map, defaultLayers);
    const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
  }

  calculateRoute(): void {
    this.fetchStopDetailsAndGenerateWaypoints();
  }

onRouteSuccess(result: any): void {
    const route = result.response.route[0];

    const lineString = new H.geo.LineString();
    route.shape.forEach((point: any) => {
      const parts = point.split(',');
      lineString.pushLatLngAlt(parts[0], parts[1]);
    });

    const routePolyline = new H.map.Polyline(lineString, {
      style: { strokeColor: 'blue', lineWidth: 3 }
    });

    this.map.addObject(routePolyline);

    route.waypoint.forEach((waypoint: any, index: number) => {
      const marker = new H.map.Marker({
        lat: waypoint.mappedPosition.latitude,
        lng: waypoint.mappedPosition.longitude
      });
      this.map.addObject(marker);
      marker.label = index + 1;
    });

    this.map.getViewModel().setLookAtData({ bounds: route.boundingBox });
  }

async fetchStopDetailsAndGenerateWaypoints(): Promise<void> {
    const request = new StopDetailsRequest(null, this.shipmentId);
    try {
      const response = await this.jsmapService.getStopDetails(request).toPromise();
      if (response.data && response.data.StopDetailDTOList) {
        const stopDetails: StopDetail[] = response.data.StopDetailDTOList.map(item => ({
          stopName: item.StopName,
          stopAlias: item.StopAlias,
          shipmentName: item.ShipmentName,
          stopSequence: item.StopSequence,
          latitude: item.Latitude,
          longitude: item.Longitude,
          estimatedDispatcherArrival: item.EstimatedDispatcherArrival,
          estimatedDispatcherDeparture: item.EstimatedDispatcherDeparture
        }));

        this.locations = this.generateLocationsFromDTO(stopDetails);
        this.waypoints = this.generateWaypoints(this.locations);

        // Use locations and waypoints as needed
        console.log(this.locations);
        console.log(this.waypoints);
        const routingParameters: { [key: string]: any } = {
          mode: 'fastest;car',
          representation: 'display'
        };

        for (const key in this.waypoints) {
          if (this.waypoints.hasOwnProperty(key)) {
            routingParameters[key] = this.waypoints[key];
          }
        }

        this.router = this.platform.getRoutingService();
        this.router.calculateRoute(routingParameters, this.onRouteSuccess.bind(this), this.onRouteError.bind(this));
      } else {
        console.error('Invalid response format: stopDetailDTOList is not an array');
      }
    } catch (error) {
      // Handle the error here
      console.error(error);
    }
  }

jsmap.component.html

<div id="mapContainer" style="width: 100%; height: 500px;"></div>

在调试时，可以看到代码正在工作，并且正在获取必要的细节以填充Map上的经度和纬度，但不知何故，它没有加载到模态框中。
输出：

请帮助和指导！