带有谷歌地图的 Ionic 2

Question

我正在使用 ionic 2 (beta11) 和 Google 地图。我有一个工作正常的页面，它按预期显示地图。

要访问此页面，我单击一个项目，然后通过this.nav.push(MapPage, { 加载该页面。如您所见，地图加载：

但是，当我再上一层，再次执行this.nav.push(MapPage, {（显示相同的页面）时，页面显示出来了，但地图看起来像这样：

所以它已经从一页导航到同一页，但第二次地图不可见。

这是我的代码：

html

  <ion-card id="map" class="job-map"></ion-card>

ma​​p.ts

  load(bounds: google.maps.LatLngBounds): void {
    let mapOptions = {
      center: bounds.getCenter(),
      zoom: 15,
      maxZoom: 15,
      minZoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var htmlElement: HTMLElement = document.getElementById("map");
    this.map = new google.maps.Map(htmlElement, mapOptions);
    this.map.fitBounds(bounds);
    this.ref.markForCheck();
    this.mapLoading = false;
  }

如果有人可以提供任何建议，我将不胜感激。

Answer 1

问题是因为堆栈中有两个具有相同元素 id 的“map”页面。如果我给每个页面一个唯一的 id，它就可以工作。