单击选项卡时，无法完全加载mapbox中的地图

问题描述

我正在使用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 bounds
var 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 bounds
var bounds = [
    [a,b],// Southwest coordinates
    [c,d,]  // northeast coordinates
];
var map = new mapBoxgl.Map({
    container: 'map2',center: [y,z],zoom: 9.8,'top-left');
</script>

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

问题陈述：：我想知道我需要在上面的脚本中进行哪些更改，以便将其完全加载到选项卡上，单击(doesn't get resized into 50% of the original size)

解决方法

在添加样式以设置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',// stylesheet location
  center: [y,z],zoom: 9.8,'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>