时间戳

首页 > 解决方案 > 如何使用 Mapbox 在单个页面中显示两个地图

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>

标签： javascripthtmlmapbox

解决方案

看起来您在这里遇到了与定位有关的 CSS 问题。您可以尝试绝对定位这两个地图，如下面的代码示例所示：

var long = -71.2145400;
var lat = 46.8122800;
var long2 = -73.589;
var lat2 = 45.485;
var zoom = 12;
mapboxgl.accessToken = 'pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2tnaHl1Nm5kMGFuejMxbHYxdXNiZTdmaSJ9.NzXqTSavz0iRskwUmt5kPw';

// Map 1
var map1 = new mapboxgl.Map({
container: 'map1', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [long, lat], // starting position [long, lat]
zoom: zoom // starting zoom
});
  

// Map 2
var map2 = new mapboxgl.Map({
container: 'map2', // container id
style: 'mapbox://styles/mapbox/dark-v10', // stylesheet location
center: [long2, lat2], // starting position [long, lat]
zoom: zoom // starting zoom
});
body { margin:0; padding:0;}
#map1 { position:absolute; top:0; bottom:0; left: 0; width:50%; }
#map2 { position:absolute; top:0; bottom:0; right: 0; width:50%;}
.maplabel {
  position: absolute;
  background: white;
  z-index: 1000;
  font-size: 20px;
  padding: 10px;
}
.map2 {
 right: 0;
}
<html>
<head>
<meta charset='utf-8' />
<title>Map Comparison</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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' />
</head>
<body>
  <div class='maplabel'>Map 1</div>
  <div id='map1'></div>
  <div class='maplabel map2'>Map 2</div>
  <div id='map2'></div>
</body>
</html>

推荐阅读