NavController 的推送不显示谷歌地图

Posted 2023-03-13

【中文标题】NavController 的推送不显示谷歌地图

【英文标题】：NavController's push doesn't show Google Maps

【发布时间】：2017-12-10 09:45:47

【问题描述】：

单击按钮时，我正在尝试绘制地图。但是，当我使用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>

【参考方案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>

【参考方案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

【讨论】：

它仍然没有出现:(

它真的不会向您的控制台抛出任何东西吗？也没有警告？那么开发者控制台上的网络申请呢？得到的地图有什么问题吗？