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

我正在使用angular 4和AGM https://angular-maps.com/我想显示地图，但它只显示我在图像中，如果我从模式中删除它，它完美地表现出来，这将是正确的工作方式？如何在引导模式中正确显示谷歌地图Angular 4

这显示在地图：

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

来源

2017-08-02 EdwinU

[tag：angularjs]标签仅用于角度1.x，对于Angular 2+使用标签：[tag：angular] – 0mpurdy

我得到了同样的问题。寻找在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

来源

2017-10-06 12:39:39

很好，谢谢..... – JSON

我用triggerResize解决方案，但它并没有为我工作，所以我只是把地图进入体内，并使其不可见然后追加入模态使其可见。

来源

2018-01-31 12:33:02 Sima

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

回答

相关问题