时间戳

首页 > 解决方案 > ionic2 和谷歌地图弄乱了后退按钮弹出

google-maps - ionic2 和谷歌地图弄乱了后退按钮弹出

问题描述

我有一个页面将在 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');
     });

  }

总而言之：

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

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

我已经睡了两个晚上试图弄清楚这一点，当我在视图 C 上禁用谷歌地图时，一切都很好。

标签： google-mapscordovaionic-frameworkgoogle-maps-api-3ionic2

解决方案

我将 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>

推荐阅读