离子地图在我第一次进入页面时加载但在导航后不加载 [英] Ionic map loads when i first enter the page but after navigating back it does not load

问题描述

我正在开发一个基于IONIC地理位置的远足应用程序，我一直在尝试加载地图但它总是第一次运行良好，但当我回到其他标签时，当我返回到该地图页面页面空白。

I am working on a hiking app based on IONIC geolocation, i have been trying to load the map but it always works well for the first time but when i go back to other tabs and when i return to that map page the page goes blank.

这是map-geolocation的代码

This is the code for the map-geolocation

import { Component, ViewChild, ElementRef } from '@angular/core';
import {Navbar, NavController, NavParams, Platform} from 'ionic-angular';
import * as firebase from 'Firebase';
import { Geolocation } from '@ionic-native/geolocation';
import { Device } from '@ionic-native/device';
import {Hike} from "../../shared/hike";


declare var google: any;

@Component({
  selector: 'page-Geoloc',
  templateUrl: 'Geoloc.html'
  })
export class Geoloc {

@ViewChild('map') mapElement: ElementRef;
map: any;
markers = [];
ref = firebase.database().ref('geolocations/');
hike: Hike;

@ViewChild(Navbar) navBar: Navbar;
constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public platform: Platform,
          private geolocation: Geolocation,
          private device: Device) {

this.hike = navParams.get('data');


}

initMap() {
this.geolocation.getCurrentPosition().then((resp) => {

  let mylocation = new 
  google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
  this.map = new google.maps.Map(this.mapElement.nativeElement, {
    zoom: 15,
    center: mylocation
  });
 });
 google.maps.event.trigger(this.map, 'resize');
 let watch = this.geolocation.watchPosition();
 watch.subscribe((data) => {
 this.deleteMarkers();
 this.updateGeolocation(this.device.uuid, 
 data.coords.latitude,data.coords.longitude);
 let updatelocation = new 
 google.maps.LatLng(data.coords.latitude,data.coords.longitude);
    let image = 'assets/imgs/blue-bike.png';
    this.addMarker(updatelocation,image);
    this.setMapOnAll(this.map);
  });
} 

 addMarker(location, image) {
   let marker = new google.maps.Marker({
   position: location,
   map: this.map,
   icon: image
  });
  this.markers.push(marker);
 }

 setMapOnAll(map) {
 for (var i = 0; i < this.markers.length; i++) {
 this.markers[i].setMap(map);
   }
 }

 clearMarkers() {
 this.setMapOnAll(null);
 }

 deleteMarkers() {
   this.clearMarkers();
   this.markers = [];
 }

 updateGeolocation(uuid, lat, lng) {
     let timestamp = Date();
     if(localStorage.getItem('mykey')) {


firebase.database().ref('geolocations/'+localStorage.getItem('mykey')).set({
    uuid: uuid,
    latitude: lat,
    longitude : lng,
    timestamp : timestamp
  });
} else {
  let newData = this.ref.push();
  newData.set({
    uuid: uuid,
    latitude: lat,
    longitude: lng,
    timestamp : timestamp
  });
  console.log(newData.key);
  localStorage.setItem('mykey', newData.key);
  }
}

ionViewDidLoad() {
 this.navBar.backButtonClick = (e:UIEvent)=>{
   // todo something
   this.navCtrl.pop();
 }

 this.platform.ready().then(() => {
  this.initMap();
 });
 this.ref.on('value', resp => {
  this.deleteMarkers();
  snapshotToArray(resp).forEach(data => {
    if (data.uuid !== this.device.uuid){
      var currentTime = new Date().getSeconds();
      if (data.timestamp + 25 <= currentTime) {
        let image = 'assets/imgs/green-bike.png';
        let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
        this.addMarker(updatelocation, image);
        this.setMapOnAll(this.map);
      }
      else {
        let image = 'assets/imgs/blue-bike.png';
        let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
        this.addMarker(updatelocation, image);
        this.setMapOnAll(this.map);
      }
    }
    else {
      let image = 'assets/imgs/blue-bike.png';
      let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
      this.addMarker(updatelocation, image);
      this.setMapOnAll(this.map);
      }
    });
  });

}


}

export const snapshotToArray = snapshot => {
 let returnArr = [];

snapshot.forEach(childSnapshot => {
  let item = childSnapshot.val();
  item.key = childSnapshot.key;
  returnArr.push(item);
});

 return returnArr;
};

我通过更改生命周期元素并使用this.maps.remove（）来尝试了一些解决方案;但他们不工作

I have tried some solutions by changing the lifecycle elements and by using this.maps.remove(); but they dont work

推荐答案

当你第一次显示地图页面后离开地图页面时，地图附加到的原始DOM元素被毁了。
因此，当您返回到地图页面时，原生Google Maps UI元素会附加到不存在的DOM元素上，因为当您使用Ionic时，Ionic实际上会为您的地图页面重新创建一组DOM元素。重新审视它。

When you leave the map page after it is first shown, the original DOM element the map was attached to is destroyed. Consequently the native Google Maps UI element is attached to a non-existent DOM element when you "return" to your map page, since under the hood Ionic is actually recreating a new set of DOM elements for your map page when you revisit it.

解决方案是致电 setDiv（）在第一页show初始创建地图后的后续页面上显示。
这将更新本机UI元素以附加到新创建的DOM元素。

The solution is to call setDiv() on subsequent page shows after you initally create the map on the first page show. This will update the native UI element to attach to the newly created DOM element.

在代码的上下文中：

export class Geoloc {

    mapInitialised = false;

    ionViewDidLoad() {

        if(this.mapInitialised){
            this.map.setDiv(this.mapElement.nativeElement);
        }else{
            this.platform.ready().then(() => {
                this.initMap();
                this.mapInitialised = true;
            });
        }
    }
}

这篇关于离子地图在我第一次进入页面时加载但在导航后不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！