Карта Google ionic3 не отображается в navstack - PullRequest
Новая
       12

Карта Google ionic3 не отображается в navstack

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

Я не могу отобразить карту Google в приложении ionic 3 при использовании вкладок со ссылкой.

У меня есть 3 таблицы, а на вкладке 1 у меня есть ссылка на карту Google для пользователей.

позволяетПредположим, мое текущее имя вкладки AddressPage, когда я нажимаю на ссылку, чтобы показать карту Google, я перехожу к MapPage с nav.push() и загружает мой ионный заголовок, но я не вижу карту Google в середине экрана, и она показываетМоя предыдущая страница AddressPage Содержание в середине страницы карты.

Я уверен, что у меня есть карта Google там, потому что у меня есть кнопка в ионном содержимом, которая показывает текущую ширину маркера, и она работает, но карты там нет.

Я использовал Safari для отладки приложения, и когда я делаю все видимые в ionon-приложениях нет, отображается карта Google.так что я думаю, что это некоторая проблема css с ionic и Google Map SDK.

Кстати, я могу показать карту, когда я не использую вкладки и ее домашнюю страницу, поэтому у меня есть только эта проблема в этой ситуации.

Может ли кто-нибудь1 помочь мне в этом?Я много искал в stackoverflow и ионном форуме, и я почти сделал все, что видел в Интернете.от добавления css, как добавление nav-decorator css, чтобы скрыть или ....

Заранее благодарен за любую помощь!

это моя ионная информация: 

ionic (Ionic CLI)  : 4.1.2 (C:\Users\ASUS\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework    : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

 ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

thisэто моя карта page.ts код 

ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

//load the map
loadMap() {
    //google map options
    let mapOptions: GoogleMapOptions = {
        camera: {
            target: this.mapCenter,
            zoom: 16,
            tilt: 10,
        },
        mapTypeId: 'ROADMAP',
        controls: {
            myLocationButton: true,
            zoom: false
        },
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.showLoading(null);
    this.map.on(GoogleMapsEvent.MAP_READY)
        .subscribe((resp) => {
            this.hideLoading();

        });

}

это моя страница карты css 

 #map_canvas {
height: 100%;
width: 100%;
  }

это моя карта.html 

<ion-header>
<ion-navbar>
    <ion-title text-center>
        انتخاب آدرس
    </ion-title>
</ion-navbar>
</ion-header>
 <ion-content>

<div id="map_canvas" >

</div>

</ion-content>

1 Ответ

0 голосов
/ 24 октября 2018

Когда вы работаете с вкладками , это решение работает для вас видимым и скрывает карту Google между различными вкладками. 

initialMapLoad: boolean = true;

ngAfterViewInit(){
  this.loadMap();
}

ionViewWillEnter(){
  if (!this.initialMapLoad) {
    // reset div & *then* set visibility to smooth out reloading of map
    this.map.setDiv('map_canvas');
    this.map.setVisible(true);
  } else {
    this.initialMapLoad = false;
  }
}

ionViewWillLeave() {
  // unset div & visibility on exit
  this.map.setVisible(false);
  this.map.setDiv(null);
}

Кроме этого вы можетеиспользовать Google Maps Javascript API.Он очень хорошо работает везде

...