如何在引导模式Angular 4中正确显示谷歌地图答案

【问题标题】：How to properly display google maps in a bootstrap modal Angular 4如何在引导模式Angular 4中正确显示谷歌地图
【发布时间】：2017-08-02 20:42:52
【问题描述】：

我正在使用 angular 4 和 AGM https://angular-maps.com/ 我想显示地图，但它只显示图像中的我，如果我从模态中删除它，它会完美显示，这将是正确的方法上班？

这显示了地图：

HTML代码：

    <a class="btn btn-warning btn-flat" href="#modalMap" data-toggle="modal"><i class="fa fa-lg fa-map"></i></a>

    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body">

                <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                </agm-map>


        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    </div>

</div>

我的组件：

   import { Component, OnInit } from '@angular/core';
   import { AngularFireDatabase, FirebaseListObservable } from       'angularfire2/database';

@Component({
selector: 'ap-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
title: string = 'My first AGM project';
lat: number = 51.678418;
lng: number = 7.809007;
zoom: number= 15;

 ngOnInit() {}
}

CSS：

agm-map {
height: 300px;
width: 100%;
}

【问题讨论】：

angularjs 标签仅适用于 Angular 1.x，适用于 Angular 2+ 使用标签：angular

标签： twitter-bootstrap angular google-maps typescript

【解决方案1】：

我遇到了同样的问题。在 Github 的 @AGM 项目中寻找解决方案后，我发现了这个并为我工作：

嗨，在你的 component.ts 中导入以下内容

import { AgmMap } from '@agm/core';

然后在你的构造之前得到如下 ViewChild。

@ViewChild(AgmMap)
public agmMap: AgmMap

当你显示你的部分然后调用调整大小触发器之类的。

this.agmMap.triggerResize();

来源：https://github.com/SebastianM/angular-google-maps/issues/1101

【讨论】：

【解决方案2】：

我遇到了同样的问题，搜索了几个小时后，我在 https://github.com/SebastianM/angular-google-maps/pull/188 找到了提示。他使用 triggerResize 的方式拯救了我的一天。

在 xxx.component.html:

**********************TriggerGoogleMapModal*******
  <button type="button" class="btn btn-warning" (click) = "LocatePet(googleMapModal);map.triggerResize()">Locate Me</button>

**********************GoogleMapModal**************
<div >
<modal #googleMapModal >
  <modal-header>
  </modal-header>
  <modal-content>
<agm-map #map [latitude]="lat" [longitude]="lng" [zoom]="11">
<agm-marker [latitude]="lat" [longitude]="lng" ></agm-marker>
</agm-map>
</modal-content>
<modal-footer>           
  <button class="btn btn-default" (click)="googleMapModal.close()">Close</button>
</modal-footer>
</modal>
</div>

在 xxx.component.ts 中：

import {ViewChild} from '@angular/core';
import {Modal} from 'ngx-modal';
...
export class DetailPetComponent implements OnInit {
  @ViewChild('map') myMap:AgmMap;
  ...
  LocatePet(googleMapModal){
  ....
  }
}

【讨论】：