Google maps 谷歌地图在另一个页面上

我一直在使用google地图插件whit ionic v2-3，该地图在第一页上运行良好，如您所见：

仅供参考：我已经安装了插件并生成了API密钥

这是我的代码：

地图视图.html

<ion-header>

  <ion-navbar>
    <ion-title>mapView</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <button ion-button block (click)="mapa2()">Next Page</button>
  <ion-list>
    <ion-item>
      <ion-label>Nick</ion-label>
      <ion-input type="text" [(ngModel)]="doc"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" [(ngModel)]="pss"></ion-input>
    </ion-item>
    <button ion-button full color="primary" (click)="login()">
      Login
    </button>
  </ion-list>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

<ion-header>

  <ion-navbar>
    <ion-title>map2</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

在第二页地图不再显示，但在功能中输入：

代码（相同）：

map2.html

<ion-header>

  <ion-navbar>
    <ion-title>mapView</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <button ion-button block (click)="mapa2()">Next Page</button>
  <ion-list>
    <ion-item>
      <ion-label>Nick</ion-label>
      <ion-input type="text" [(ngModel)]="doc"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" [(ngModel)]="pss"></ion-input>
    </ion-item>
    <button ion-button full color="primary" (click)="login()">
      Login
    </button>
  </ion-list>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

<ion-header>

  <ion-navbar>
    <ion-title>map2</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

在应用程序上导航时，如何在其他页面上显示地图

---

提前感谢，

嗨，安德烈斯·费利佩·查帕罗

我的代码中也有类似的问题

一个可能的问题是

map.one（GoogleMapsEvent.map\u READY）中的“one”，然后（（数据：any）=>{

one将只在GoogleMapsEvent.map\u READY上执行一次，当我想在我的应用程序中使用更多地图时，我将one更改为on例如

map.on（GoogleMapsEvent.map\u READY）.然后（（数据：任意）=>{

另一个可能的问题可能是在div中使用id=“map”。但可能我错了。当您推送一个页面时，堆栈中的下一个页面将被实例化，但您推送的页面不会（尚未）破坏，因为您可以返回。可能是在第二个页面中使用

document.getElementById（'map'）；

您获得第一页的div元素，因此不会在第二页上呈现地图。若要查看是否存在这种情况，您可以将第二页上地图的id更改为，例如

---

希望这对你有所帮助。

嗨，安德烈斯·费利佩·查帕罗

我的代码中也有类似的问题

一个可能的问题是

map.one（GoogleMapsEvent.map\u READY）中的“one”，然后（（数据：any）=>{

one将只在GoogleMapsEvent.map\u READY上执行一次，当我想在我的应用程序中使用更多地图时，我将one更改为on例如

map.on（GoogleMapsEvent.map\u READY）.然后（（数据：任意）=>{

另一个可能的问题可能是在div中使用id=“map”。但可能我错了。当您推送一个页面时，堆栈中的下一个页面将被实例化，但您推送的页面不会（尚未）破坏，因为您可以返回。可能是在第二个页面中使用

document.getElementById（'map'）；

您获得第一页的div元素，因此不会在第二页上呈现地图。若要查看是否存在这种情况，您可以将第二页上地图的id更改为，例如

---

希望这对您有所帮助。

尝试使用V2插件版本。尝试使用V2插件版本。