NavController 的推送不显示谷歌地图

Question

单击按钮时，我正在尝试绘制地图。但是，当我使用NavController.push() 时，它似乎不起作用，而仅适用于NavController.setRoot()。我没有收到任何错误，所以我无法弄清楚是什么原因造成的。

这是绘制地图的类：

declare var google: any;


@Component({
  selector: 'page-Map',
  templateUrl: 'Map.html'
})



export class MapPage {

  public directionsService: any;
  public directionsDisplay: any;
  public directions: any;
  map: any;
  markers = [];

  constructor(private _theme: ThemeService, private shareService: ShareService, public ajaxService: AjaxService) {
    let rendererOptions = { draggable: true };
    this.directionsService = new google.maps.DirectionsService;
    let googleDiplay = new google.maps.DirectionsRenderer(rendererOptions);
    this.directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
    this.initMap();

  }

  //initialises the map
  initMap() {
    var point = { lat: 12.65, lng: 12.5683 };
    let divMap = (<HTMLInputElement>document.getElementById('map'));
    this.map = new google.maps.Map(divMap, {
      center: point,
      zoom: 15,
      disableDefaultUI: true,
      draggable: true,
      zoomControl: true,
    });
    let locationOptions = { timeout: 30000, enableHighAccuracy: true, maximumAge: 0 };

    navigator.geolocation.getCurrentPosition((position) => {
      this.map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    }, (error) => { }, locationOptions);

    //create marker and set to initialised map
    var myLatLng = this.map.getCenter();
    this.directionsDisplay.setMap(this.map);
  }
}

这是 HTML：

<ion-header>
    <ion-navbar>
      <ion-title>Location</ion-title>
    </ion-navbar>
  </div>
</ion-header>

<ion-content>
  <div id="map"></div>
</ion-content>

Answer 1

我已经解决了这个问题。不起作用的原因是id='map'已经在使用中，所以我将Map.html中的id改为id=map3。所以现在我的 HTML 文件看起来像这样：

enter code here

我也变了

let divMap = (<HTMLInputElement>document.getElementById('map')); 到

let divMap = (<HTMLInputElement>document.getElementById('map3'));

和 CSS：

#map3 { height: 100%; }

和 HTML：

<ion-header>
    <ion-navbar>
      <ion-title>Location</ion-title>
    </ion-navbar>
  </div>
</ion-header>

<ion-content>
  <div id="map3"></div>
</ion-content>

Answer 2

尝试在 platform.ready() 之后初始化地图

import { Platform } from 'ionic-angular';

constructor(public platform: Platform){
  // ...ALL YOUR CODE...
  platform.ready().then(() => {
    this.initMap();
  }); 
}

并确保您的地图具有通过 css 所需的大小

#map {
  width: 100%;
  height: 100%; // 'auto' might work too
}