如何在引導模式中正確顯示谷歌地圖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

回答

相關問題