Question

我在angular4应用程序中使用了angular-google-map。在我的应用程序中，我有一个带有两个选项卡的组件，让我们说选项卡A和B，我需要在每个选项卡上加载地图。但是标签B没有显示地图。

Component.html： -

<div class="col-sm-12 col-md-6">
 <div class="tab-wrapper">
  <ul class="nav nav-tabs">
     <li class="active">
        <a href="#tabA" data-toggle="tab">Tab A</a>
     </li>
     <li>
        <a href="#tabB" data-toggle="tab">Tab B</a>
     </li>
  </ul>
  <div class="tab-content">
     <div class="tab-pane active" id="tabA">
        <agm-map [latitude]="lat" [longitude]="lng">
           <agm-polygon [paths]="Points"  [editable]=editable  [visible]="visible" [draggable]=draggable [fillColor]=fillColor>
           </agm-polygon>
        </agm-map>
     </div>
     <div class="tab-pane" id="tabB">
        <agm-map [latitude]="lat" [longitude]="lng">
           <agm-polygon [paths]="Points2"  [editable]=editable  [visible]="visible" [draggable]=draggable [fillColor]=fillColor>
           </agm-polygon>
        </agm-map>
     </div>
  </div>

Component.ts： -

lat          : any = 33.5362475;
lng          : any = -111.9267386;
zoom         : any = 10;
fillColor    : any = '#DC143C';
draggable    : any = true;
editable     : any = true;
visible      : any = true;

Answer 1

你需要调整（）谷歌地图的大小。你可以这样做：

@ViewChild('agmMap') agmMap : AgmMap;

tabActivated() {
        this.agmMap.triggerResize();
    }

Google地图未加载到angular4中的标签中

1 个答案: