twitter-bootstrap – 如何在引导模式Angular 4中正确显示谷歌地

发布时间：2020-12-17 21:31:25 所属栏目：安全来源：网络整理

导读：我正在使用角4和AGM https://angular-maps.com/我想要显示地图,但它只显示我在图像中,如果我从模态中删除它,它显示完美,这将是正确的工作方式？这显示了地图： Html代码： a class="btn btn-warning btn-flat" href="#modalMap" data-toggle="modal"i class

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

这显示了地图：

This shows the 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%;
}

解决方法

我得到同样的问题.在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!