ionic2 和谷歌地图弄乱了后退按钮弹出答案

【问题标题】：ionic2 and google maps messing with back button popionic2 和谷歌地图弄乱了后退按钮弹出
【发布时间】：2018-12-13 05:31:33
【问题描述】：

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

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

只要我禁用我的新 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（位置列表） - 使用 lat 和 long 参数推送到视图 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 上禁用谷歌地图时，一切都很好。

【问题讨论】：

嗨...你找到解决方案了吗？你能分享一下..我面临同样的问题
@sumanth 在下面查看我的答案，如果有帮助请告诉我？

标签： google-maps cordova ionic-framework google-maps-api-3 ionic2

【解决方案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()
    });

  }

我也将 this.loadMap(); 从 IonViewDidLoad() 函数中移出，而是将其放入 ionViewDidEnter() 函数中。

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

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

【讨论】：