Je veux adapter la hauteur de la carte à la taille de l'écran. J'ai essayé height:100%
. Mais ça ne marche pas. Pouvez-vous s'il vous plaît me dire comment faire?
Merci!
J'enveloppe la balise AGM dans deux éléments conteneurs
<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>
J'ai ensuite mis le conteneur extérieur à 100%, le conteneur intérieur à une hauteur arbitraire (cela n'a pas d'importance),
et l'élément AGM à 100% via CSS comme celui-ci.
.outer-wrapper {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
.map-wrapper {
height: 400px;
agm-map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
}
}
J'utilise ensuite les fonctions suivantes dans le composant pour capturer les événements d'inactivité, de changement de centre et de redimensionnement
@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;
}
}
Ayez également les variables suivantes définies
@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;
Assurez-vous simplement d'utiliser le Renderer de @angular/core ainsi que HostListener
Salut,
Bonne journée.
Fonctionne pour une question rapide de redimensionnement, comment définir cela au premier chargement ? Lorsque la page se charge dans le navigateur Web, la faire redimensionner pour s'adapter à l'écran actuel ? Merci.
Salutations.
JJ
Peu importe :)
Commentaire le plus utile
J'enveloppe la balise AGM dans deux éléments conteneurs
J'ai ensuite mis le conteneur extérieur à 100%, le conteneur intérieur à une hauteur arbitraire (cela n'a pas d'importance),
et l'élément AGM à 100% via CSS comme celui-ci.
J'utilise ensuite les fonctions suivantes dans le composant pour capturer les événements d'inactivité, de changement de centre et de redimensionnement
Ayez également les variables suivantes définies
Assurez-vous simplement d'utiliser le Renderer de @angular/core ainsi que HostListener