谷歌地圖2

Question

我一直在與谷歌地圖插件白衣離子V2-3，地圖效果很好的第一頁上，你可以在這裏看到：

FYI：我已經安裝了插件和生成的API密鑰

這是我的代碼：

地圖view.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> 

地圖view.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; 

import { 
GoogleMaps, 
GoogleMapsEvent, 
LatLng 
} from '@ionic-native/google-maps'; 

@IonicPage() 
@Component({ 
    selector: 'page-map-view', 
    templateUrl: 'map-view.html', 
}) 
export class MapView { 

    public doc:string; 
    public pss:string; 

    constructor(public navCtrl: NavController, 
       public navParams: NavParams, 
       private googleMaps: GoogleMaps, 
       public platform:Platform, 
       public loginCtrl:LoginService) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad MapView'); 
    } 

    mapa2(){ 
    this.navCtrl.push('Map2'); 
    } 

    ngAfterViewInit() { 
    this.platform.ready().then(() => { 
     this.loadMap(); 
    }); 
    } 

loadMap() { 
let element: HTMLElement = document.getElementById('map'); 
let map = this.googleMaps.create(element); 

    console.log("Inicializo el mapa"); 


     map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{ 
     let myPosition = new LatLng(43.0741904, -89.3809802); 
       map.animateCamera({target: myPosition,zoom:10}); 
       map.addMarker({ 
       'position':myPosition, 
       'title': 'hi!' 
       }); 

     }).catch(()=>console.log("GoogleMap is not available")); 
} 
} 

在第二頁不再顯示在地圖，但在功能上輸入：

的代碼（相同）：

map2.html

<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.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; 

import { 
GoogleMaps, 
GoogleMapsEvent, 
LatLng 
} from '@ionic-native/google-maps'; 

@IonicPage() 
@Component({ 
    selector: 'page-map2', 
    templateUrl: 'map2.html', 
}) 
export class Map2 { 

    constructor(public navCtrl: NavController, public navParams: NavParams, 
       public platform:Platform, 
       private googleMaps: GoogleMaps) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad Map2'); 
    } 

    ngAfterViewInit() { 
    this.platform.ready().then(() => { 
     this.loadMap(); 
    }); 
    } 

    loadMap() { 
    let element: HTMLElement = document.getElementById('map'); 
    let map = this.googleMaps.create(element); 
    console.log("Inicializo el mapa"); 


     map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{ 
     let myPosition = new LatLng(43.0741904, -89.3809802); 
       map.animateCamera({target: myPosition,zoom:10}); 
       map.addMarker({ 
       'position':myPosition, 
       'title': 'Hi2' 
       }); 

     }).catch(()=>console.log("GoogleMap is not available")); 
    } 
} 

我怎樣才能顯示在其他網頁地圖時上的應用程序導航！

由於提前，

Answer 1

嗨安德烈斯費利佩查，

我在我的代碼也有類似的問題。

一個可能的問題是與「一個」在map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{一個將只GoogleMapsEvent.MAP_READY執行一次，當我想在我的應用程序中使用更多的地圖，我改變一個到上例如map.on(GoogleMapsEvent.MAP_READY).then((data:any)=>{

另一個可能的問題可能是在您的div中使用id =「map」。但也許我錯了。當你推動一個頁面時，堆棧中的下一個頁面將被實例化，但是你所推動的頁面不會（然而）被破壞，因爲你可以返回。可能出現的情況是，在第二頁document.getElementById('map');中，您獲得第一頁的div元素，因此不會在第二頁上呈現地圖。要查看是否屬於這種情況，可以將第二頁上的地圖的ID更改爲<div #map id="map2" style="height:100%;"></div>

希望這可以幫助你以任何方式。