Ionic2和谷歌地图弄乱了后退按钮弹出

Question

>我有一个页面，它将在ionic2中显示谷歌地图，其中包含我传递到该页面的纬度，它并不总是相同的纬度。

问题是当我点击此页面时，它加载正常，然后我单击工具栏中的后退按钮，它返回正常，如果我再次进入地图屏幕，它会毫无问题地加载，再次单击返回没有问题，但是如果我从该父视图执行另一个后退按钮操作以转到主屏幕，则发生的所有情况都是短暂闪烁主屏幕，然后加载原始屏幕在未加载内容或按钮的视图中。

一旦我禁用我的新google.maps.map代码，一切运行正常。

我的代码：

//below all the imports
declare var google;
//at the top of the class
longitude: any;
latitude: any;
@ViewChild('map') mapElement: ElementRef;
//in the constructor
this.longitude = navParams.get('longitude');
this.latitude = navParams.get('latitude');
//call map load on page load
ionViewDidLoad() {
setTimeout(() => {
this.loadMap();
},100);
}

loadMap() {
let latLng = new google.maps.LatLng(this.latitude, this.longitude);
let mapEle = this.mapElement.nativeElement;
let mapOptions = {
center: latLng,
zoom: 15
}
//this.map
let map = new google.maps.Map(mapEle, mapOptions);
let marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
google.maps.event.addListenerOnce(map, 'idle', () => {
mapEle.classList.add('show-map');
});
}

所以总结一下：

• 视图 A - 推送到视图 B
• 视图 B(位置列表(- 推送到具有经度和经度参数的视图 C
• 视图 C(谷歌地图显示经度( - 弹出回视图 B
视图
• B可以再次推送视图C没有问题
视图
• C可以弹回视图B没有问题
• 视图 B 弹出回视图 A - 呈现空白视图 B，并且后退按钮不再可见。

我有一种感觉，由于某种原因，当我从 C 返回视图 B 时，它会清除视图堆栈，这意味着视图 B 到 A 有问题，它只是呈现一个空白视图 B....一旦我禁用了创建新的google.maps.map的逻辑，一切就会按预期再次工作，我可以毫无问题地跳回视图A。

编辑：经过进一步调查，似乎视图 A 确实加载了，构造函数被调用等，但几乎立即视图 B 渲染并且它的构造函数被调用......几乎就像弹出视图 A 导致最初从视图 A 调用视图 B 的按钮单击再次触发？或者再次执行的意图...

我已经起床 2 晚试图解决这个问题，当我在视图 C 上禁用谷歌地图时，一切都很好。

Answer 1

我将loadMap((函数更改为以下内容：

loadMap() {
let latLng = new google.maps.LatLng(this.latitude, this.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
}

我还从 IonViewDidLoad(( 函数中移动了 this.loadMap((;并将其放入 ionViewDidEnter(( 函数中。

不确定您正在使用什么谷歌地图库，但我没有使用任何离子库，而是使用以下方式将谷歌地图 API 导入索引.html页面：

<script src="https://maps.google.com/maps/api/js?key=[YOUR KEY]"></script>