Javascript 地图盒中的地图不'；t单击选项卡时完全加载

我使用的是

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',
    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>

<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>

ABC DEFGHI JKL
mapboxgl.accessToken='hello'；
//设定界限
变量界限=[
[e，f]，//西南坐标
[g，h，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map1”，
风格：'mapbox://styles/abcdef',
中间：[p，q]，
缩放：12.3，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
mapboxgl.accessToken='hello'；
//设定界限
变量界限=[
[a，b]，//西南坐标
[c，d，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map2”，
风格：'mapbox://styles/abcdef',
中间：[y，z]，
缩放：9.8，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
函数openTab（evt，era）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

---

问题陈述：我想知道我需要在上面的脚本中做些什么更改，以便它在选项卡单击时完全加载

（不会调整为原始大小的50%）

在添加样式以设置

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；
//设定界限
变量界限=[
[e，f]，//西南坐标
[g，h，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map1”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中间：[p，q]，
缩放：12.3，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
//设定界限
变量界限=[
[a，b]，//西南坐标
[c，d，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map2”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中间：[y，z]，
缩放：9.8，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
函数openTab（evt，era）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
#map1，
#map2{
高度：500px；
}

ABC DEF
GHI JKL
在添加样式以设置
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；
//设定界限
变量界限=[
[e，f]，//西南坐标
[g，h，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map1”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中间：[p，q]，
缩放：12.3，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
//设定界限
变量界限=[
[a，b]，//西南坐标
[c，d，]//东北坐标
];
var map=new mapboxgl.map({
容器：“map2”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中间：[y，z]，
缩放：9.8，
maxBounds:bounds//将边界设置为最大值
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
addControl（新的mapboxgl.FullscreenControl（），“左上角”）；
函数openTab（evt，era）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
#map1，
#map2{
高度：500px；
}

ABC DEF
GHI JKL