如何在 angular-google-maps 中以编程方式 open/close 时髦的信息-window?
How to open/close a snazzy-info-window programmatically in angular-google-maps?
如果我正在使用 agm-info-window
,您可以从控制器以编程方式调用 open/close
模板:
<agm-data-layer [geoJson]="geoJsonObject" [style]="styleFunc" (layerClick)="clicked($event, gm, infoWindow)" >
<agm-info-window [disableAutoPan]="true"
[latitude]="infoWindowLat"
[longitude] = "infoWindowLong"
[isOpen]="infoWindowIsOpen"]
#infoWindow>
{{infoWindowText}}
</agm-info-window>
</agm-data-layer>
控制器:
clicked(clickEvent, gm, infoWindow) {
if (gm.lastOpen != null)
{
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
但是如果我使用<agm-snazzy-info-window>
,open()
和close()
是未定义的。
<agm-snazzy-info-window [isOpen]="infoWindowIsOpen"
[latitude]="infoWindowLat"
[longitude]="infoWindowLong"
[closeWhenOthersOpen]="true"
[closeOnMapClick]="true"
[showCloseButton]="false"
[openOnMarkerClick]="true"
([backgroundColor]="'#FFF'"
#infoWindow>
<ng-template>
{{infoWindowText}}
</ng-template>
</agm-snazzy-info-window>
如何从控制器打开/关闭 <agm-snazzy-info-window>
?
您确实可以使用 isOpen 属性来动态 open/close 时尚信息 window。
/* component.ts */
isSnazzyInfoWindowOpened: boolean = false;
constructor(@Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) {
}
toggleSnazzyInfoWindow() {
this.isSnazzyInfoWindowOpened = !this.isSnazzyInfoWindowOpened;
}
/**
* You can omit this function if closeWhenOthersOpen and closeOnMapClick are false
*/
snazzyInfoWindowIsToggled($isOpen: boolean) {
console.log(`snazzyInfoWindowIsToggled ${$isOpen}`);
// Keep isSnazzyInfoWindowOpened up-to-date (e.g. if window was closed on map click)
this.isSnazzyInfoWindowOpened = $isOpen;
// Force detect changes.
// Not necessarily needed. Depends on your projet
// Here needed if window was closed on map click
this.changeDetectorRef.detectChanges();
}
模板:
<agm-map [latitude]="50.523458" [longitude]="2.800024">
<agm-snazzy-info-window #snazzyInfoWindow
[closeWhenOthersOpen]="true"
[closeOnMapClick]="true"
[isOpen]="isSnazzyInfoWindowOpened"
(isOpenChange)="snazzyInfoWindowIsToggled($event)"
[latitude]="50.523458" [longitude]="2.800024">
<ng-template>
Hello!
</ng-template>
</agm-snazzy-info-window>
</agm-map>
<button (click)="toggleSnazzyInfoWindow()">Toggle SnazzyInfoWindow</button>
当你使用 infoWindow.open() 在 agm/snazzy-in-window 中不起作用时,试试这个
<agm-map>
<agm-marker
(mouseOver)="onMouseOver(infoWindow, $event)"
(mouseOut)="onMouseOut(infoWindow, $event)">
<agm-snazzy-info-window
[closeWhenOthersOpen]="true"
[panOnOpen]="false"
[placement]="'bottom'" #infoWindow>
<ng-template>
<h6 class="mb-0">this is marker</h6>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map>
component.ts
onMouseOver(infoWindow, $event: MouseEvent) {
infoWindow._openInfoWindow();
}
onMouseOut(infoWindow, $event: MouseEvent) {
infoWindow._closeInfoWindow();
}
如果我正在使用 agm-info-window
,您可以从控制器以编程方式调用 open/close
模板:
<agm-data-layer [geoJson]="geoJsonObject" [style]="styleFunc" (layerClick)="clicked($event, gm, infoWindow)" >
<agm-info-window [disableAutoPan]="true"
[latitude]="infoWindowLat"
[longitude] = "infoWindowLong"
[isOpen]="infoWindowIsOpen"]
#infoWindow>
{{infoWindowText}}
</agm-info-window>
</agm-data-layer>
控制器:
clicked(clickEvent, gm, infoWindow) {
if (gm.lastOpen != null)
{
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
但是如果我使用<agm-snazzy-info-window>
,open()
和close()
是未定义的。
<agm-snazzy-info-window [isOpen]="infoWindowIsOpen"
[latitude]="infoWindowLat"
[longitude]="infoWindowLong"
[closeWhenOthersOpen]="true"
[closeOnMapClick]="true"
[showCloseButton]="false"
[openOnMarkerClick]="true"
([backgroundColor]="'#FFF'"
#infoWindow>
<ng-template>
{{infoWindowText}}
</ng-template>
</agm-snazzy-info-window>
如何从控制器打开/关闭 <agm-snazzy-info-window>
?
您确实可以使用 isOpen 属性来动态 open/close 时尚信息 window。
/* component.ts */
isSnazzyInfoWindowOpened: boolean = false;
constructor(@Inject(ChangeDetectorRef) private changeDetectorRef: ChangeDetectorRef) {
}
toggleSnazzyInfoWindow() {
this.isSnazzyInfoWindowOpened = !this.isSnazzyInfoWindowOpened;
}
/**
* You can omit this function if closeWhenOthersOpen and closeOnMapClick are false
*/
snazzyInfoWindowIsToggled($isOpen: boolean) {
console.log(`snazzyInfoWindowIsToggled ${$isOpen}`);
// Keep isSnazzyInfoWindowOpened up-to-date (e.g. if window was closed on map click)
this.isSnazzyInfoWindowOpened = $isOpen;
// Force detect changes.
// Not necessarily needed. Depends on your projet
// Here needed if window was closed on map click
this.changeDetectorRef.detectChanges();
}
模板:
<agm-map [latitude]="50.523458" [longitude]="2.800024">
<agm-snazzy-info-window #snazzyInfoWindow
[closeWhenOthersOpen]="true"
[closeOnMapClick]="true"
[isOpen]="isSnazzyInfoWindowOpened"
(isOpenChange)="snazzyInfoWindowIsToggled($event)"
[latitude]="50.523458" [longitude]="2.800024">
<ng-template>
Hello!
</ng-template>
</agm-snazzy-info-window>
</agm-map>
<button (click)="toggleSnazzyInfoWindow()">Toggle SnazzyInfoWindow</button>
当你使用 infoWindow.open() 在 agm/snazzy-in-window 中不起作用时,试试这个
<agm-map>
<agm-marker
(mouseOver)="onMouseOver(infoWindow, $event)"
(mouseOut)="onMouseOut(infoWindow, $event)">
<agm-snazzy-info-window
[closeWhenOthersOpen]="true"
[panOnOpen]="false"
[placement]="'bottom'" #infoWindow>
<ng-template>
<h6 class="mb-0">this is marker</h6>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-map>
component.ts
onMouseOver(infoWindow, $event: MouseEvent) {
infoWindow._openInfoWindow();
}
onMouseOut(infoWindow, $event: MouseEvent) {
infoWindow._closeInfoWindow();
}