来自 mapbox 的地图不会在选项卡单击时完全加载

Question

我使用的地图mapbox在单击选项卡时不会加载完整。单击选项卡时，地图的大小会调整为原始大小的 50%（不知道为什么会这样）。的html/javascript地图如下图所示：<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script><strong><div class="tab"><button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button><button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button></div></strong><div id="part1" class="tabcontent"><div id="map1"></div> </div><div id="part2" class="tabcontent"><div id="map2"></div></div><script>mapboxgl.accessToken = 'hello';// Set boundsvar bounds = [    [e, f], // Southwest coordinates    [g, h, ]  // Northeast coordinates];var map = new mapboxgl.Map({    container: 'map1',    style: 'mapbox://styles/abcdef',    center: [p, q],    zoom: 12.3,    maxBounds: bounds // Sets bounds as max});// Add zoom and rotation controls to the map.map.addControl(new mapboxgl.NavigationControl());map.addControl(new mapboxgl.FullscreenControl(), 'top-left');</script><script>mapboxgl.accessToken = 'hello';// Set boundsvar bounds = [    [a, b], // Southwest coordinates    [c, d, ]  // Northeast coordinates];var map = new mapboxgl.Map({    container: 'map2',    style: 'mapbox://styles/abcdef',    center: [y, z],    zoom: 9.8,    maxBounds: bounds // Sets bounds as max});// Add zoom and rotation controls to the map.map.addControl(new mapboxgl.NavigationControl());map.addControl(new mapboxgl.FullscreenControl(), 'top-left');</script>问题陈述：我想知道我需要在上面的脚本中进行哪些更改，以便它在选项卡单击时完全加载(doesn't get resized into 50% of the original size)

Answer 1

map1添加样式以设置高度和map2容器后，似乎按预期工作：

#map1, #map2 {

  height: 500px;

}

mapboxgl.accessToken = 'access_token';

var a = -79.5,

  b = 35,

  c = -69.5,

  d = 45,

  p = -74.5,

  q = 40,

  e = -79.5,

  f = 35,

  g = -69.5,

  h = 45,

  y = -74.5,

  z = 40;

// Set bounds

var bounds = [

  [e, f], // Southwest coordinates

  [g, h, ] // Northeast coordinates

];

var map = new mapboxgl.Map({

  container: 'map1',

  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location

  center: [p, q],

  zoom: 12.3,

  maxBounds: bounds // Sets bounds as max

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

// Set bounds

var bounds = [

  [a, b], // Southwest coordinates

  [c, d, ] // Northeast coordinates

];

var map = new mapboxgl.Map({

  container: 'map2',

  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location

  center: [y, z],

  zoom: 9.8,

  maxBounds: bounds // Sets bounds as max

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

function openTab(evt, era) {

  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {

    tabcontent[i].style.display = "none";

  }

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {

    tablinks[i].className = tablinks[i].className.replace(" active", "");

  }

  document.getElementById(era).style.display = "block";

  evt.currentTarget.className += " active";

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

#map1,

#map2 {

  height: 500px;

}

<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />

<div class="tab">

  <button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button>

  <button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button>

</div>

<div id="part1" class="tabcontent">

  <div id="map1"></div>

</div>

<div id="part2" class="tabcontent">

  <div id="map2"></div>

</div>