谷歌地图上的另一页离子2
谷歌地图上的另一页离子2
提问于 2017-05-18 22:16:40
我一直在使用离子型v2-3的google地图插件，地图在第一页上运行得很好，你可以在这里看到：
FYI:我已经安装了插件并生成了API键。
这是我的密码：
map-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"));
}
}当我在应用程序上导航时，如何在其他页面上显示地图？
提前谢谢你，
回答 1
Stack Overflow用户
发布于 2017-08-03 07:29:35
你好安德烈·费利佩·查帕罗
我的代码中也有类似的问题。
一个可能的问题是one在map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{ one中只在GoogleMapsEvent.MAP_READY上执行一次，当我想在应用程序中使用更多的映射时，我将one改为 on ，例如map.on(GoogleMapsEvent.MAP_READY).then((data:any)=>{
另一个可能的问题是在div中使用id="map"。但也许我错了。当您推送一个页面时，堆栈中的下一个页面将被实例化，但是您正在推送的页面不会(尚未)破坏，因为您可以返回。在使用document.getElementById('map');的第2页中，您可能会得到第1页的div元素，因此不会在第2页上呈现地图。要查看是否是这种情况，您可以将第2页地图的id更改为例如<div #map id="map2" style="height:100%;"></div>
希望这对你有任何帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44058622
复制相关文章
相似问题
腾讯云开发者
