2017-05-18 199 views
1

我一直在与谷歌地图插件白衣离子V2-3,地图效果很好的第一页上,你可以在这里看到:谷歌地图2

map on first page

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")); 
} 
} 

在第二页不再显示在地图,但在功能上输入:

Second page, does not show the map

的代码(相同):

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")); 
    } 
} 

我怎样才能显示在其他网页地图时上的应用程序导航!

由于提前,

+0

尝试使用V2插件版本https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/README.md。 –

回答

0

嗨安德烈斯费利佩查,

我在我的代码也有类似的问题。

一个可能的问题是与“一个”在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>

希望这可以帮助你以任何方式。