如何在@angular/google-maps的信息窗口中使用角度材质数据网格

Question

我在 Angular17 中使用 @angular/google-maps。单击任何标记时，我想使用角度材料数据网格显示信息窗口内的数据（https://material.angular.io/components/grid-list/overview）。

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  GoogleMapsModule,
  MapInfoWindow,
  MapMarker,
} from '@angular/google-maps';
import { MapService } from './services/map.service';
import { MatGridListModule } from '@angular/material/grid-list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    GoogleMapsModule,
    MatToolbarModule,
    FilterComponent,
    MatGridListModule,
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  @ViewChild(MapInfoWindow, { static: false })
  infoWindow!: MapInfoWindow;
  mapsData: any;
  markers: any[] = [];
  infoContent: any;
  constructor(private mapService: MapService) {}

  openInfo(marker: MapMarker) {
    this.infoContent =
      '<mat-grid-list cols="2" rowHeight="2:1"><mat-grid-tile>1</mat-grid-tile><mat-grid-tile>2</mat-grid-tile></mat-grid-list>';
    this.infoWindow.open(marker);
  }

app.component.html

<google-map
  height="500px"
  width="900px"
  [center]="center"
  [zoom]="zoom"
  (mapClick)="moveMap($event)"
  (mapMousemove)="move($event)"
>
  <map-marker
    #markerElem="mapMarker"
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem)"
  >
    <map-info-window>
      <div [innerHTML]="infoContent"></div>
    </map-info-window>
  </map-marker>
</google-map>

上面的 openInfo() 不会以预期的数据网格格式显示给定的静态数据。有人可以帮助我了解应该如何修改它或确认是否可以在谷歌地图的信息窗口中使用角度材料。

Answer 1

当你处理 Angular 时，innerHTML 可能无法正确渲染，而是直接渲染输出，如下所示！

<google-map
  height="500px"
  width="900px"
  [center]="center"
  [zoom]="zoom"
  (mapClick)="moveMap($event)"
  (mapMousemove)="move($event)"
>
  <map-marker
    #markerElem="mapMarker"
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
    (mapClick)="openInfo(markerElem)"
  >
    <map-info-window>
      <div>
         <mat-grid-list cols="2" rowHeight="2:1">
             <mat-grid-tile>1</mat-grid-tile>
             <mat-grid-tile>2</mat-grid-tile>
         </mat-grid-list>
      </div>
    </map-info-window>
  </map-marker>
</google-map>