Html 爱奥尼亚地图盒不'；在我全屏显示或打开开发人员工具之前，我不会显示全屏

我正在使用mapbox api生成地图。我试图使宽度和高度等于100%，但是类

mapboxgl canvas

在启动时有一个默认值，width为300px，height为400px

但当我给出全屏或开发工具时，它和我定义的css样式放在一起

#map {

    width: 100%;

    height: 100%;

  }

这是我的tab2.page

<ion-header>

  <ion-toolbar>

    <ion-title>

      Tab 2

    </ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

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

 </ion-content>

---

设置选项后，尝试调用Mapbox的

.resize（）

函数

在ngOnInit（）的结尾处：

---

设置选项后，尝试调用Mapbox的

.resize（）

函数

在ngOnInit（）的结尾处：

import { Component, OnInit } from '@angular/core';

import { environment } from '../../environments/environment.prod';

import * as Mapboxgl from 'mapbox-gl';

@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',

  styleUrls: ['tab2.page.scss']

})

export class Tab2Page implements OnInit{

  constructor() {}

  title = 'view';

  map: Mapboxgl.Map;

  ngOnInit(){

    (Mapboxgl as any).accessToken = environment.mapboxKey;

    this.map = new Mapboxgl.Map({

    container: 'map', // container id

    style: 'mapbox://styles/mapbox/outdoors-v11',

    center: [-74.810913,10.985246], // LNG, LAT

    zoom: 14 // starting zoom

    });



    // Add zoom and rotation controls to the map.

    this.map.addControl(new Mapboxgl.NavigationControl());



  }

}

map.on('load', () => {
    map.resize();
});