angular - 在 Angular 中自动居中地图 - Angular AGM-Direction

Question

目前，我们正在使用 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();
    } 
}

标签： angularagm-coreagm-direction