角度谷歌地图自定义HTML infoWindow

问题描述

我正在使用Google Maps角度组件（https://github.com/angular/components/blob/master/src/google-maps/README.md）。 我有一个标记数组，我想在其中显示带有自定义HTML的infoWindow。现在我的问题是如何在infoWindows中显示自定义HTML。

到目前为止，我的窗口显示完成，唯一的问题是它显示的是普通字符串，而不是HTML内容。 我的component.html看起来像：

<map-marker #markerElem="mapMarker"
    *ngFor="let marker of markersArray"
    [options]="marker"
    (mapClick)="openInfo(markerElem,marker.info)"
>
</map-marker>

<map-info-window>{{ infoContent }}</map-info-window>

在我的component.ts中：

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

infoContent: string;

openInfo(marker: MapMarker,content: string) {
    this.infoContent = content;
    this.infoWindow.open(marker);
}

如何让我的infoWindow显示 SOME TEKST 而不是<h2>SOME TEKST</h2>？

解决方法

在这种情况下，您应该使用innerHTML或outerHTML绑定：

<map-info-window>
  <div [innerHTML]="infoContent"></div>
</map-info-window>

或

<map-info-window>
  <div [outerHTML]="infoContent"></div>
</map-info-window>

它们之间的区别在于，前者将保留<div>包装，而后者则不保留。