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

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

Answer 1

map1添加样式以设置高度和map2容器后，似乎按预期工作：#map1, #map2 {&nbsp; height: 500px;}mapboxgl.accessToken = 'access_token';var a = -79.5,&nbsp; b = 35,&nbsp; c = -69.5,&nbsp; d = 45,&nbsp; p = -74.5,&nbsp; q = 40,&nbsp; e = -79.5,&nbsp; f = 35,&nbsp; g = -69.5,&nbsp; h = 45,&nbsp; y = -74.5,&nbsp; z = 40;// Set boundsvar bounds = [&nbsp; [e, f], // Southwest coordinates&nbsp; [g, h, ] // Northeast coordinates];var map = new mapboxgl.Map({&nbsp; container: 'map1',&nbsp; style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location&nbsp; center: [p, q],&nbsp; zoom: 12.3,&nbsp; 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 boundsvar bounds = [&nbsp; [a, b], // Southwest coordinates&nbsp; [c, d, ] // Northeast coordinates];var map = new mapboxgl.Map({&nbsp; container: 'map2',&nbsp; style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location&nbsp; center: [y, z],&nbsp; zoom: 9.8,&nbsp; 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) {&nbsp; var i, tabcontent, tablinks;&nbsp; tabcontent = document.getElementsByClassName("tabcontent");&nbsp; for (i = 0; i < tabcontent.length; i++) {&nbsp; &nbsp; tabcontent[i].style.display = "none";&nbsp; }&nbsp; tablinks = document.getElementsByClassName("tablinks");&nbsp; for (i = 0; i < tablinks.length; i++) {&nbsp; &nbsp; tablinks[i].className = tablinks[i].className.replace(" active", "");&nbsp; }&nbsp; document.getElementById(era).style.display = "block";&nbsp; evt.currentTarget.className += " active";}// Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();#map1,#map2 {&nbsp; 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">&nbsp; <button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button>&nbsp; <button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button></div><div id="part1" class="tabcontent">&nbsp; <div id="map1"></div></div><div id="part2" class="tabcontent">&nbsp; <div id="map2"></div></div>