Angular 如何在谷歌地图中以编程方式打开/关闭时髦的信息窗口?
如果我使用的是Angular 如何在谷歌地图中以编程方式打开/关闭时髦的信息窗口?,angular,google-maps,infowindow,angular-google-maps,Angular,Google Maps,Infowindow,Angular Google Maps,如果我使用的是agm信息窗口,您可以从控制器以编程方式调用open/close 模板: <agm-data-layer [geoJson]="geoJsonObject" [style]="styleFunc" (layerClick)="clicked($event, gm, infoWindow)" > <agm-info-window [disableAutoPan]="true" [latitude]="infoWi
agm信息窗口
,您可以从控制器以编程方式调用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>
<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>
}
但是如果我使用
,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>
{{infoWindowText}}
如何从控制器打开/关闭一个
?您确实可以使用isOpen属性动态打开/关闭时髦的信息窗口
/* 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-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>
<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>