html - 在我全屏或打开开发人员工具之前，IONIC Mapbox 不会显示完整

Question

我正在使用 mapbox api 来生成地图。我试图使宽度和高度等于 100%，但是该类mapboxgl-canvas在启动时有一个默认值，宽度为 300 像素，高度为 400 像素。

但是当我提供全屏或开发人员工具时，它会放置在我定义的 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>

还有我的 TypeScript 文件

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());



  }

}

标签： htmlcssionic-frameworkmapbox

Answer 1

设置选项后尝试调用 Mapbox 的.resize()函数。

在结束时ngOnInit()：

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