angular - 如何在@angular/google-maps infoWindow 中显示动态内容

Question

具体来说，您如何在相应的 infoWindow 中显示与标记相关的信息？

按照 repo here 上的示例进行操作，为每个标记打开相同的信息。使用旧的 Angular 谷歌地图，您可以轻松地将信息窗口插入标记内，其中包含您想要的任何数据。

我在模板中看到了一些使用 {{ contentHere }} 设置内容的示例，但这仅允许使用字符串。我需要像往常一样使用所有 Angular 模板。

假设我们的模板看起来像 repo 示例:

<google-map height="400px"
        width="750px"
        [center]="center"
        [zoom]="zoom">
  <map-marker #marker
          *ngFor="let place of places"
          [position]="{ lat: place.latitude, lng: place.longitude }"
          [options]="markerOptions"
          (mapClick)="openInfoWindow(marker)">

      <map-info-window>
        <-- this is what i'm concerned with -->
        {{ place.description }}
      </map-info-window>
  </map-marker>
</google-map>

然后我们像 repo 示例一样添加 viewchild 并以相同的方式打开它:

@ViewChild(MapInfoWindow, {static: false}) infoWindow: MapInfoWindow;

openInfoWindow(marker: MapMarker) {
  this.infoWindow.open(marker);
}

尽管这确实打开了正确的标记，并且标记将反射(reflect)动态信息，但这将为每个信息窗口显示相同的内容/place.description，这并不奇怪，因为正在使用单个 ViewChild。我想出了各种复杂的方法来做到这一点，并查看了源代码，但似乎没有一个明显的和/或内置的解决方案可以在窗口中显示与什么相关的内容被标记使用。没有将其作为基本示例似乎很奇怪。

你们中的任何人会怎么做呢？

Answer 1

最简单的方法，希望对你有帮助
TS

public openInfoWindow(marker: MapMarker, infoWindow: MapInfoWindow) {
    infoWindow.open(marker);
}

HTML

<google-map *ngIf="mapOptions.center" width="100%" height="100%" [options]="mapOptions">
    <ng-container *ngFor="let elem of elements">
        <map-marker #marker="mapMarker" [position]="elem.position" [options]="elem.markerOptions" (mapClick)="openInfoWindow(marker, infoWindow)"></map-marker>
        <map-info-window #infoWindow="mapInfoWindow"> Content of {{ elem.id }} ...</map-info-window>
    </ng-container>
</google-map>