Ich möchte die Höhe der Karte an die Bildschirmgröße anpassen. Ich habe height:100%
versucht. Aber es funktioniert nicht. Können Sie mir bitte sagen, wie es geht?
Vielen Dank!
Ich schließe das AGM-Tag in zwei Container-Elemente ein
<div class="outer-wrapper">
<div class="map-wrapper" id="wrapper" #wrapper>
<agm-map
[latitude]="latitude"
[longitude]="longitude"
[scrollwheel]="true"
[zoom]="zoom"
(idle)="idle()"
(centerChange)="centerChange($event)"
id="AgmMap"
#AgmMap>
<agm-marker
[latitude]="latitude"
[longitude]="longitude"
[markerClickable]="true"></agm-marker>
</agm-map>
</div>
</div>
Ich setze dann den äußeren Container auf 100%, den inneren Container auf eine beliebige Höhe (es spielt keine Rolle),
und das AGM-Element zu 100% durch CSS wie folgt.
.outer-wrapper {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
.map-wrapper {
height: 400px;
agm-map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
}
}
Ich verwende dann die folgenden Funktionen in der Komponente, um die Leerlauf-, CenterChange- und Resize-Ereignisse zu erfassen
@HostListener('window:resize')
onWindowResize() {
this.onResize();
}
ngAfterViewInit() {
this.renderer.setElementStyle(
this.wrapper.nativeElement, 'height',
(window.innerHeight) + 'px'
);
}
onResize() {
// resize the container for the google map
this.renderer.setElementStyle(
this.wrapper.nativeElement, 'height',
(window.innerHeight ) + 'px'
);
// recenters the map to the resized area.
this.agmMap.triggerResize().then(() =>
this.agmMap._mapsWrapper.setCenter({lat: this.centerLat, lng: this.centerLng}));
}
// idle fires after paning or zooming is done.
// This is where we want to capture the center of the map.
// This way if the user resizes, the center is preserved.
idle() {
this.centerLat = this.changeLat;
this.centerLng = this.changeLng;
}
// this event fires whenever any event changes the center. Panning, zooming, or resizing.
centerChange(event: any) {
if (event) {
this.changeLat = event.lat;
this.changeLng = event.lng;
}
}
Habe auch die folgenden Variablen gesetzt
@ViewChild('AgmMap') agmMap: any;
@ViewChild('wrapper') wrapper: ElementRef;
public latitude: number;
public longitude: number;
private centerLat: number;
private centerLng: number;
public zoom: number;
private changeLat: number;
private changeLng: number;
Stellen Sie nur sicher, dass Sie den Renderer von @angular/core sowie HostListener verwenden
Hi,
Guten Tag.
Funktioniert für eine Größenänderung, kurze Frage, wie würde ich dies beim ersten Laden einstellen? Wenn die Seite im Webbrowser geladen wird, um ihre Größe an den aktuellen Bildschirm anzupassen? Vielen Dank.
Grüße.
JJ
Egal :)
Hilfreichster Kommentar
Ich schließe das AGM-Tag in zwei Container-Elemente ein
Ich setze dann den äußeren Container auf 100%, den inneren Container auf eine beliebige Höhe (es spielt keine Rolle),
und das AGM-Element zu 100% durch CSS wie folgt.
Ich verwende dann die folgenden Funktionen in der Komponente, um die Leerlauf-, CenterChange- und Resize-Ereignisse zu erfassen
Habe auch die folgenden Variablen gesetzt
Stellen Sie nur sicher, dass Sie den Renderer von @angular/core sowie HostListener verwenden