Javascript 如何使用Mapbox在一个页面中显示两个地图

我相信你很好。 我有一个问题，我想在一个选项卡驱动的html页面中显示两个地图。 第一张地图已显示，但第二张地图未显示。 我可能做错了什么

我的HTML：

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Tab1">Tab 1</a></li>
<li><a data-toggle="tab" href="#Tab2">Tab 2</a></li>
</ul>
 <div class="tab-content">
<div class="tab-content">
 <div id="Tab1" class="tab-pane fade in active">
<div class="custom-popup" id="map1"></div> 
 </div>
<div id="Tab2" class="tab-pane fade in active">
 <div class="custom-popup" id="map2"></div>
</div>
</div>
</div>

我的剧本：

<script>
mapboxgl.accessToken = 'MyAccessToken';
var map1 = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [25.771944, -30.241943],
zoom: 5
});
//Second Map
var map2 = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [25.771944, -30.241943],
zoom: 5
}); 
</script>

mapboxgl.accessToken='MyAccessToken'；
var map1=新的mapboxgl.Map({
容器：“map1”，
风格：'mapbox://styles/mapbox/outdoors-v11',
中间：[25.771944，-30.241943]，
缩放：5
});
//第二张地图
var map2=新的mapboxgl.Map({
容器：“map2”，
风格：'mapbox://styles/mapbox/outdoors-v11',
中间：[25.771944，-30.241943]，
缩放：5
}); 

mapboxgl.accessToken='pk.eyj1ijoiywjywfvywx2zxmilchijoi2oxbtrzzxbmda1zj3bzi3odzuctm2dcj9.AICaNFFp-vS2tD5mEHulmA'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v9',
中间：[-9838.88]，
最大缩放：5，
minZoom:1，
缩放：3
});
mapboxgl.accessToken='pk.eyj1ijoiywfvywx2zxmilcjhijoi2oxbtrzzxbmmda1zj3bzi3odzuctm2dcj9.AICaNFFp-vS2tD5mEHulmA'；
var map=new mapboxgl.map({
容器：“map2”，
风格：'mapbox://styles/mapbox/streets-v9',
中间：[-9838.88]，
最大缩放：5，
minZoom:1，
缩放：3
});
body{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
#地图{
位置：绝对位置；
左：25%；
排名：0；
底部：0；
宽度：75%；
}
.地图覆盖图{
位置：绝对位置；
宽度：25%；
排名：0；
底部：0；
左：0；
字体：12px/20px“Helvetica Neue”，Arial，Helvetica，无衬线；
背景色：#fff；
最大高度：100%；
溢出：隐藏；
}
.map overlay字段集{
显示：无；
背景：ddd；
边界：无；
填充：10px；
保证金：0；
}
.地图覆盖输入{
显示：块；
边界：无；
宽度：100%；
边界半径：3px；
填充：10px；
保证金：0；
}
.map overlay.listing{
溢出：自动；
最大高度：100%；
}
.map覆盖。列表>*{
显示：块；
填充物：5px10px；
保证金：0；
}
.map overlay。列表a{
边框底部：1px实心rgba（0,0,0,0.1）；
颜色：#404；
文字装饰：无；
}
.map overlay。清单a：最后一个子项{
边界：无；
}
.map overlay。清单a：悬停{
背景：#f0；
}
在定位方面，您似乎遇到了CSS问题。您可以尝试绝对定位两个贴图，如下面的代码示例所示：


var long=-71.2145400；
var lat=46.8122800；
var long2=-73.589；
var lat2=45.485；
var=12；
mapboxgl.accessToken='pk.eyj1ijoicgxtyxbib3gilchijoi2tnahl1nm5kmgfuejmxbhyxdxniztdmasj9.NzXqTSavz0iRskwUmt5kPw'；
//地图1
var map1=新的mapboxgl.Map({
容器：“map1”，//容器id
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[长，横向]，//起始位置[长，横向]
缩放：缩放//开始缩放
});
//地图2
var map2=新的mapboxgl.Map({
容器：“map2”，//容器id
风格：'mapbox://styles/mapbox/dark-v10“，//样式表位置
中心：[long2，lat2]，//起始位置[long，lat]
缩放：缩放//开始缩放
});
body{margin:0；padding:0；}
#map1{位置：绝对；顶部：0；底部：0；左侧：0；宽度：50%；}
#map2{位置：绝对；顶部：0；底部：0；右侧：0；宽度：50%；}
.地图标签{
位置：绝对位置；
背景：白色；
z指数：1000；
字体大小：20px；
填充：10px；
}
.map2{
右：0；
}

地图比较
地图1
地图2
我认为这可能是CSS的问题：

我正在使用JS选项卡附加工作JS fiddle，其中包含两个mapbox映射实例：

https://jsfiddle.net/dollysingh3192/whzq5f1e/1/

我修正了：

#map1 {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

 #map2 {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

和gif：
选项卡看起来工作正常，使用两个选项卡内容类可能会搞乱事情。你能在JSFIDLE中复制吗

在过去，我在向隐藏的div添加贴图时遇到问题，要解决这个问题，需要在显示该div时调用map_resize，但这是您不使用的ployate.js


mapboxgl.accessToken='pk.eyj1ijoiznjbmtub2hviiiiiii6imnpetruc2lntawmjcycw82yxfqb25zewuifq.rZInQYYcrTLa-0oyP2kcbQ'；
var map1=新的mapboxgl.Map({
容器：“map1”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[-74.5,40]，//起始位置[lng，lat]
缩放：9//开始缩放
});
var map2=新的mapboxgl.Map({
容器：“map2”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[-77.5,50]，//起始位置[lng，lat]
缩放：5//开始缩放
});
var map3=新的mapboxgl.Map({
容器：“map3”，
风格：'mapbox://styles/mapbox/streets-v11“，//样式表位置
中心：[37.5,50]，//起始位置[lng，纬度]
缩放：2//开始缩放
});









仍然只有一张地图显示，第二张地图没有显示。请稍等片刻，抱歉耽搁了，解决了吗？