Angular: Google Maps работает в первый раз, затем пустым только на экранах мобильных устройств. - PullRequest
Новая
       20

Angular: Google Maps работает в первый раз, затем пустым только на экранах мобильных устройств.

0 голосов
/ 10 февраля 2020

Я создаю мобильное приложение, используя ionic / angular. На созданной мной странице есть карта Google, которая отлично работает при первой загрузке / доступе, но при переходе назад и обратно на страницу карты карта становится пустой или не отображается. !!

Эта проблема возникает только на мобильных устройствах! и если я коснулся или щелкнул в любом месте, снова работает, но не при инициализации, как показано на скриншоте внизу.

Вот stackblitz https://stackblitz.com/edit/ionic-4-angular-8-start-template-xx3btx?file=src%2Fapp%2Ftab2%2Ftab2.page.ts

Просто нажмите на Кнопка на главной странице click here вы увидите, что в первый раз работает нормально, так что просто вернитесь назад кнопкой под заголовком (не используйте спину для stackblitz ), затем go к снова, и вы увидите, что карта полностью пуста.

На консоли не отображаются ошибки;

Мой код: 

@ViewChild('map', { static: true }) mapElement: ElementRef;
map: any;

activeLocation: any;

ngOnInit() {
  this.loadMap();
}

loadMap() {

    this.loadingService.present('Loading, please wait...');

    let latLng = new google.maps.LatLng(29.2865163, 47.9916857);

    let mapOptions = {
      center: latLng,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    var marker, i;
    let th = this;

    google.maps.event.addListenerOnce(this.map, 'resize', function () {
      google.maps.event.trigger(this.map, 'resize');
    });

    this.wooService.kefanBranchesLocations().then(
      locations => {

        this.loadingService.dismiss();
        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
            animation: google.maps.Animation.DROP,
            map: this.map
          });

          google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
              th.activeLocation = locations[i];
              th.activeLocation['open_hours'] = typeof th.activeLocation['open_hours'] == 'string' ? JSON.parse(th.activeLocation['open_hours']) : th.activeLocation['open_hours'];
              console.log(th.activeLocation);
            }
          })(marker, i));
        }
      }
    );
  }

HTML: 

<div #map id="map"></div>

CSS: 

#map {
    position: absolute;
    width: 100%;
    height: 100%;
}

Скриншот:

enter image description here

1 Ответ

1 голос
/ 10 февраля 2020

Вы должны реализовать AfterContentInit и переместить свой код из ngOnInit() в ngAfterContentInit().

Angular не создаст элемент карты на этапе инициализации. Вы должны проверить позже в жизненном цикле страницы.

Проверьте официальные документы для получения дополнительной информации: https://angular.io/guide/lifecycle-hooks.

...