如何在引导模态Angular 4中正确显示Google地图 [英] How to properly display google maps in a bootstrap modal Angular 4

问题描述

我正在使用Angle 4和AGM https://angular-maps.com/我想显示地图，但只显示图像中的图像，如果我从模态中删除它，它可以完美显示，这是正确的工作方式吗?

I am working with angular 4 and AGM https://angular-maps.com/ I would like to show the map, but it only shows me as in the image, if I remove it from the modal, it shows perfectly, which would be the correct way to work ?

这显示了地图:

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

推荐答案

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

I get the same issue. After looking for a solution in @AGM project at Github i found this and worked for me:

您好，请在您的component.ts中导入以下内容

Hi, Import following in you component.ts

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

然后在您进行构造之前像波纹管一样获得ViewChild.

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

这篇关于如何在引导模态Angular 4中正确显示Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！