目前,我们正在使用 Asp.net core + Angular ( https://aspnetzero.com/ ) 来跟踪运行时的 Rider,因此管理员可以看到 Rider 的当前位置。
套餐
@agm/核心:^1.1.0 @agm-方向:^0.8.8
弹出窗口 显示 Rider 和 Pharmacy 之间的方向。 在此处输入图像描述 用户应该能够放大缩小。 在此处输入图像描述 系统应通过调用 API 来刷新 Rider 的位置,以使用 angular 中的 subscribe 获取 Rider 的新位置。
问题 当系统加载方向时,用户能够执行放大和缩小但订阅事件触发然后缩放值更改为默认值,这可以是任何取决于骑手和药房位置的值。在此处输入图像描述
html代码
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-direction [origin]="origin" [destination]="destination"> </agm-direction>
</agm-map>
TS 代码
export class ViewGeoMapDirectionModalComponent
extends AppComponentBase
implements OnInit {
@ViewChild("viewGeoMapDirectionModal", { static: true })
modal: ModalDirective;
@Output() updatedCords: EventEmitter<any> = new EventEmitter<any>();
subscription: Subscription;
active = false;
saving = false;
canUpdate = false;
title: string = "";
map: any;
public origin: any;
public destination: any;
zoom: number = 12;
usePanning: boolean = false;
riderLat : number = 25.26093952674917;
riderlng : number = 55.33655226137312;
lat: number = 25.2048;
lng: number = 55.2708;
userOrderProviderId: number;
riderTrackingInformation: RiderTrackingOutputDto;
public renderOptions = {
suppressMarkers: true,
draggable: false,
}
constructor(
injector: Injector,
private _adminDashboardServiceProxy: AdminDashboardServiceProxy
) {
super(injector);
}
ngOnInit(): void {
//throw new Error("Method not implemented.");
}
ngOnDestroy(): void {
this.zoom = 4;
this.subscription && this.subscription.unsubscribe();
}
runBackgroundJob() {
let source = interval(5000);
this.subscription = source.subscribe((val) => {
this._adminDashboardServiceProxy
.getRiderTrackingForViewRiderDetails(
this.userOrderProviderId,
false
)
.subscribe(
(result) => {
//riderTrackingInformation DTO of API
this.riderTrackingInformation = result;
this.origin = {
lat: result.sourceLatitude,
lng: result.sourceLongitude,
};
},
(error) => {
// this.origin = { lat: 0, lng: 0 };
console.log("this is error......");
}
);
});
}
show(
origin?: any,
destination?: any,
canUpdate: boolean = false,
title: string = "",
userOrderProviderId?: number
): void {
this.canUpdate = canUpdate;
this.origin = origin;
this.destination = destination;
this.title = title;
this.userOrderProviderId = userOrderProviderId;
this.modal.show();
this.runBackgroundJob();
}
save(): void {
this.active = false;
this.modal.hide();
this.updatedCords.emit(null);
}
close(): void {
this.active = false;
this.modal.hide();
this.subscription && this.subscription.unsubscribe();
}
}