我使用的地图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)
Qyouu
相关分类