使用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上的经度和纬度,但不知何故,它没有加载到模态框中。
输出:
请帮助和指导!
1条答案
按热度按时间8yparm6h1#
添加延迟生效!由于模态DOM没有及时加载,并且来自Here Map API的响应无法找到mapContainer id,因此无法初始化Map,然后其他Map停止的经度和纬度的请求没有转到Here Map API。