我使用Google Maps JavaScript API，并且必须在InfoWindow中显示一个Angular组件。
在我的项目中，我使用该Jsonp服务加载了Google Map API 。比我有google.maps.Map可用的对象。稍后，在组件中，我创建了一些标记并将单击侦听器附加到它们：
打字稿：
let marker = new google.maps.Marker(opts);
marker.setValues({placeId: item[0]});
marker.addListener('click', (ev: google.maps.MouseEvent) => this.onMarkerClick(marker, ev));
然后在click处理程序中，我想打开一个包含Angular组件的信息窗口：
打字稿：
private onMarkerClick(marker: google.maps.Marker, ev: google.maps.MouseEvent) {
var div = document.createElement();
this.placeInfoWindow.setContent(div);
// Magic should happen here somehow
// this.placeInfoWindow.setContent('<app-info-view-element></app-info-view-element>');
this.placeInfoWindow.open(this.map, marker);
}
我最后要做的是一些普通的JS：
打字稿：
private onMarkerClick(marker: google.maps.Marker, ev: google.maps.MouseEvent) {
let div = document.createElement('div');
div.className = 'map-info-window-container';
div.style.height = '140px';
div.style.width = '240px';
this.placeInfoWindow.setContent(div);
this.placeInfoWindow.open(this.map, marker);
this.placesService.getPlace(marker.get('id')).subscribe(res => {
this.decorateInfoWindow(div, res.name, marker);
}, error => {
this.decorateInfoWindow(div, ':( Failed to load details: ', marker);
});
}
据我了解，问题是创建动态组件的唯一可行方法是使用Angulars ViewContainerRef：
如何在容器中放置动态组件
但是没有文档或示例，没有描述如何ViewContainerRef从动态创建的元素创建。
强制框架以某种方式处理DOM是否可行？由于它在许多线程中都被声明为：“ Angular不处理innerHTML或appendChild”。这是一个完全的死胡同吗？
第二：是否可以使用Renderer实现？（不熟悉），我看过这个Canvas Renderer实验，从理论上讲，我猜想它也可以在Google地图上使用，因为我们可以推断出该地图只是一种特殊的画布。它在最新版本中仍然可用还是已更改？DomRenderer不在文档中，但是可以在源代码中找到它。