如何跟踪全屏事件，反之亦然谷歌地图角度

Question

我试图只在地图全屏打开时运行showInfoWindow函数，但到目前为止我无法跟踪此事件。

只有当地图打开到全屏时，我才能跟踪fullsreen事件来触发该功能？在这种情况下，我如何在agm信息窗口内移动地图放置所选的包装块？

places: Places[] = [];

mapPlaceSelected: any = null;
mapPlaceSelectedShow = false;
loadMoreIndex = 12;
mapCenter: any = [0, 0];
infoWindowOpened: any = null;


showInfoWindow(infoWindow: any, i: number) {
if (this.infoWindowOpened === infoWindow) {
return;
}
if (this.infoWindowOpened !== null) {
this.infoWindowOpened.close();
}
this.infoWindowOpened = infoWindow;
console.log(infoWindow);
}
mapPlaceClick(place: Places, i: number) {
this.mapPlaceSelected = null;
this.mapPlaceSelectedShow = true;
setTimeout(() => {
this.mapPlaceSelected = place;
}, 1);
}

<div class="places-map-wrapper" (clickOutside)="mapPlaceHide()">
<agm-map
[latitude]="mapCenter[0]"
[longitude]="mapCenter[1]"
*ngIf="places.length"
[zoom]="8"
[disableDefaultUI]="false"
[styles]="styles">
<ng-container *ngFor="let place of places; let i = index">
<agm-marker
*ngIf="place.lat && place.long"
(markerClick)="mapPlaceClick(place, i); showInfoWindow(infoWindow, i);"
[latitude]="place.lat"
[longitude]="place.long"
[iconUrl]="'assets/img/map.svg'">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>
</ng-container>
</agm-map>
<div class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow">
<span class="b_delete_image" (click)="mapPlaceHide()"></span>
<ng-container *ngIf="mapPlaceSelected">
<ng-container
[ngTemplateOutlet]="placeItem"
[ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}">
</ng-container>
</ng-container>
</div>
</div>

Answer 1

已解决！我需要添加(fullscreenchange(＝"；全屏更改(("；

fullscreen: boolean = false;

fullscreenchange() {
if (document.fullscreenElement) {
this.fullscreen = true;
console.log('fullscreen = true!');
} else {
this.fullscreen = false;
console.log('fullscreen = false!');
}
}

<agm-map
[latitude]="mapCenter[0]"
[longitude]="mapCenter[1]"
*ngIf="places.length"
[zoom]="8"
[disableDefaultUI]="false"
(fullscreenchange)="fullscreenchange()"
[styles]="styles">
</agm-map>

fullscreen: boolean = false;

fullscreenchange() {
if (document.fullscreenElement) {
this.fullscreen = true;
console.log('fullscreen = true!');
} else {
this.fullscreen = false;
console.log('fullscreen = false!');
}
}

<div class="places-map-wrapper" (clickOutside)="mapPlaceHide()">
<agm-map
[latitude]="mapCenter[0]"
[longitude]="mapCenter[1]"
*ngIf="places.length"
[zoom]="8"
[disableDefaultUI]="false"
(fullscreenchange)="fullscreenchange()"
[styles]="styles">
<ng-container *ngFor="let place of places; let i = index">
<agm-marker
*ngIf="place.lat && place.long"
(markerClick)="mapPlaceClick(place, i);"
[latitude]="place.lat"
[longitude]="place.long"
[iconUrl]="'assets/img/map.svg'">
<agm-info-window  #infoWindow *ngIf="fullscreen">
<div class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow">
<ng-container *ngIf="mapPlaceSelected">
<ng-container
[ngTemplateOutlet]="placeItem"
[ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}">
</ng-container>
</ng-container>
</div>
</agm-info-window>
</agm-marker>
</ng-container>
</agm-map>
<div *ngIf="!fullscreen" class="map-place-selected-wrapper" [class.active]="mapPlaceSelectedShow">
<span class="b_delete_image" (click)="mapPlaceHide()"></span>
<ng-container *ngIf="mapPlaceSelected">
<ng-container
[ngTemplateOutlet]="placeItem"
[ngTemplateOutletContext]="{place:mapPlaceSelected, index:1}">
</ng-container>
</ng-container>
</div>
</div>