在谷歌地图infowindow angular2中显示自定义标签 [英] Display custom tag in google maps infowindow angular2

问题描述

map.component.ts code：

  ...... 
 infoWindow = new google.maps .InfoWindow（
 {
 content：`< custom-tag>< / custom-tag>`// ***不显示任何内容*** 
}）; 
 infoWindow.open（map，marker）; 
 ...... 
  

map.component.html代码：

 < custom-tag>< / custom-tag> <！ -  ***显示喜***  - > 
< div class =google-maps>< / div> 
  

custom-tag.component.html code：

 < H2>喜< / H2> 
  

module.ts，routing.ts文件当然没有错误。
infowindow只是打开并不显示任何内容，
请帮我弄清楚infowindow为什么不显示任何内容。

您必须通过 ComponentFactoryResolver

动态地创建组件。 $ b

  const compFactory = this.resolver.resolveComponentFactory（CustomTag）; 
 this.compRef = compFactory.create（this.injector）; 
 
 this.appRef.attachView（this.compRef.hostView）; 
 
 let div = document.createElement（'div'）; 
 div.appendChild（this.compRef.location.nativeElement）; 
 
 this.infoWindow.setContent（div）; 
 this.infoWindow.open（this.map，marker）; 
  

以下是 Plunker Example

不要忘记添加 CustomTag 组件转换为 entryComponents

map.component.ts code:

......
infoWindow = new google.maps.InfoWindow(
{
    content: `<custom-tag></custom-tag>`    //***not displaying anything***
});
infoWindow.open(map, marker);
......

map.component.html code:

<custom-tag></custom-tag>      <!--***displays hi***-->
<div class="google-maps"></div>

custom-tag.component.html code:

<h2>hi</h2>

The module.ts, routing.ts files have no errors for sure. The infowindow just opens and displays nothing, Please help me in figuring out why the infowindow is not displaying anything.

解决方案

You have to create component dynamically via ComponentFactoryResolver

const compFactory = this.resolver.resolveComponentFactory(CustomTag);
this.compRef = compFactory.create(this.injector);

this.appRef.attachView(this.compRef.hostView);

let div = document.createElement('div');
div.appendChild(this.compRef.location.nativeElement);

this.infoWindow.setContent(div);
this.infoWindow.open(this.map, marker);

Here is Plunker Example

Don't forget to add CustomTag component to entryComponents

这篇关于在谷歌地图infowindow angular2中显示自定义标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！