ionic2 и гугл карты возятся с кнопкой назад - PullRequest
Новая
       32

ionic2 и гугл карты возятся с кнопкой назад

0 голосов
/ 04 июля 2018

У меня есть страница, на которой будет отображаться карта Google в 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 с параметром lat и long
  • Просмотр C (карта Google, отображающая длину лата) - вернитесь, чтобы просмотреть B
  • Вид B снова может выдвигать вид C, нет проблем
  • Просмотр C может вернуться к просмотру B без проблем
  • Вид B возвращается назад для просмотра A - выводит пустой вид B, и кнопка «Назад» больше не видна.

У меня такое ощущение, что по какой-то причине, когда я возвращаюсь к просмотру B из C, он очищает стек представлений, что означает, что у представления B к A есть проблема, и он просто отображает пустое представление B .... как только когда я отключаю логику, чтобы создать новый google.maps.Map, все снова работает, как и ожидалось, и я могу без проблем вернуться к View A.

Редактировать: После дальнейшего исследования кажется, что представление A загружается, конструктор вызывается и т. Д., Но почти сразу же представление B визуализируется, и вызывается его конструктор .... почти как если бы вы возвращались к представлению A, вызывая нажатие кнопки, Изначально вызывали вид B из вида A чтобы снова стрелять? или это намерение выполнить снова ...

Я провел 2 ночи, пытаясь выяснить это, и все отлично работает, когда я отключаю Google Maps в представлении C.

1 Ответ

0 голосов
/ 08 сентября 2018

Я изменил свою функцию 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 ().

Не уверен, какую библиотеку карт Google вы используете, но я не использую никакую ионную библиотеку. Вместо этого я импортирую API карт Google на страницу index.html, используя это: 

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