ОШИБКА TypeError: Невозможно прочитать свойство 'panTo' из неопределенного

Question

Я пытаюсь выполнить панорамирование на некоторые значения широты и долготы, пока отображается панорамирование вышеупомянутой ошибки. Но это показывает вышеуказанную ошибку.

component.ts

public map: any;
zoom; 
lat;
currentLoc: boolean; 
lng;
constructor() {

        this.zoom = 12;
        this.lat = 12.972442;
        this.lng = 77.580643;

}

 ngOnInit() {
   this.setCurrentPosition();
}

 private setCurrentPosition() {
        console.log('setting');
        this.currentLoc = true;
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition((position) => {
                this.lat = position.coords.latitude;
                this.lng = position.coords.longitude;
                this.zoom = 12;
            });
        }
    }


public mapReady(map) {
        this.map = map;
    }`

 drawOnMap() {
for (let i = 0; i < this.Locations.length; i++) {
                        // console.log(this.Locations[i].latitude, this.Locations[i].longitude);
                        const coordinate = new Coordinate(this.Locations[i].latitude, this.Locations[i].longitude);
                        // console.log( 'Coordinate is :' + coordinate);
                        this.coordinates.push(coordinate);
                        this.map.panTo({ lat: this.Locations[0].latitude, lng: this.Locations[0].longitude });
                    }
}

this.Locations [] имеет несколько латов и lng, оно не пустое

Html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" (mapReady)="mapReady($event)">
                <agm-marker *ngFor="let marker of coordinates; let i = index" [iconUrl]="station" [latitude]="marker.latitude" [longitude]="marker.longitude"
                    [markerClickable]="true" (markerClick)="markerClicked(marker.latitude,marker.longitude)">
                </agm-marker>
                <agm-marker *ngIf="currentLoc === true" [iconUrl]="Liveicon" [latitude]="lat" [longitude]="lng">
                </agm-marker>
<agm-map>

Пожалуйста, поправьте меня, где я не прав. Я не могу получить это.

Answer 1

На самом деле, весь метод setCurrentPosition не нужен. К счастью, пакет угловых карт Google делает много вещей для вас, поэтому все, что вам нужно сделать, чтобы изменить положение (и фокус) карты, это изменить this.latи это

Answer 2

Проблема проста, карта просто никогда не создается.

В html метод mapRead () прислушивается к самому себе, чтобы инициировать карту, которая никогда не произойдет, если вы не вызовете ее извне.

Решение простое. Просто создайте экземпляр карты в конструкторе или в ngOnInit, например, так:

...

ngOnInit() {
  this.map = map;
}

...

В этом случае метод mapRead является избыточным. Если вы не хотите динамически создавать свою карту.