Question

如果我使用的是<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>，您可以从控制器以编程方式调用open / close

模板：

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>

如何从控制器打开/关闭driver.findElement(By.xpath("/html/body/form/div[3]/div[2]/div[1]/div[1]/div/div[1]")).click(); Thread.sleep(1000); driver.findElement(By.xpath("/html/body/form/div[3]/div[2]/div[1]/div[1]/div/div[1]")).click(); Thread.sleep(1000); // Switch to a new window / Get the handle String parentHandle = driver.getWindowHandle(); System.out.println("Before click Category 1"); // Click bar to open drilldown //FSMSDashbopadObjects.NCbyReportCategoryBarCategory1(driver).click(); driver.findElement(By.xpath("/html/body/form/div[3]/div[2]/div[1]/div[2]/div/svg/g[8]/g/g/rect[1]")).click(); //*[@id="auditsByBrandDiversey"]/svg/g[8]/g/g/rect[1] System.out.println("After click Category 1");？

Answer 1

您确实可以使用isOpen属性动态打开/关闭Snazzy信息窗口。

/* 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>

这是一个有效的演示：https://stackblitz.com/edit/angular-1z39nb

Answer 2

当您使用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();
}

如何在angular-google-maps中以编程方式打开/关闭一个时髦的信息窗口？

2 个答案: