twitter-bootstrap - 如何在 Bootstrap 模式 Angular 4 中正确显示谷歌地图

Question

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

这显示了 map :

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%;
}

Answer 1

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

Hi, Import following in you component.ts

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

Then before your construction get ViewChild like bellow.

@ViewChild(AgmMap)
public agmMap: AgmMap

And when you show your section then called resize trigger like.

this.agmMap.triggerResize();

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