Блог

Главная - Вопросы по программированию - Как отобразить две карты на одной странице с помощью Mapbox

Как отобразить две карты на одной странице с помощью Mapbox

#javascript #html #mapbox

#javascript #HTML #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>

Ответ №1:

Похоже, что вы столкнулись с проблемой 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>

Ответ №2:

Вкладки, похоже, работают нормально, использование двух классов содержимого вкладок, вероятно, портит ситуацию. Можете ли вы воспроизвести в jsfiddle?

В прошлом у меня были проблемы с добавлением карты в скрытый div, и чтобы исправить это, нужно было вызвать map_resize для указанного div, когда он был показан, но это было с leaflet.js который вы не используете.

 mapboxgl.accessToken = 'pk.eyJ1IjoiZnJhbmtub2hvIiwiYSI6ImNpeTRuc2RlNTAwMjcycW82YXFqb25zeWUifQ.rZInQYYcrTLa-0oyP2kcbQ';
var map1 = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

var map2 = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-77.5, 50], // starting position [lng, lat]
zoom: 5 // starting zoom
});

var map3 = new mapboxgl.Map({
container: 'map3',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [37.5, 50], // starting position [lng, lat]
zoom: 2 // starting zoom
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
      </li>
    </ul>
    </div>
    <div class="row">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div id='map1' style='width: 400px; height: 300px;'></div>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> 
        <div id='map2' style='width: 400px; height: 300px;'></div>
       </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <div id='map3' style='width: 400px; height: 300px;'></div>
      </div>
    </div>
  </div>
</div>

Ответ №3:

Я считаю, что это может быть проблемой CSS:

Я прикрепляю рабочую скрипку JS с вкладками JS с двумя экземплярами mapbox map:

 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:
введите описание изображения здесь

Ответ №4:

 mapboxgl.accessToken = 'pk.eyJ1IjoiYWJyYWFvYWx2ZXMiLCJhIjoiY2oxbTRzZXBmMDA1ZjJ3bzI3ODZucTM2dCJ9.AICaNFFp-vS2tD5mEHulmA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-98, 38.88],
    maxZoom: 5,
    minZoom: 1,
    zoom: 3
});
mapboxgl.accessToken = 'pk.eyJ1IjoiYWJyYWFvYWx2ZXMiLCJhIjoiY2oxbTRzZXBmMDA1ZjJ3bzI3ODZucTM2dCJ9.AICaNFFp-vS2tD5mEHulmA';
var map = new mapboxgl.Map({
    container: 'map2',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-98, 38.88],
    maxZoom: 5,
    minZoom: 1,
    zoom: 3
});  
 body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

#map {
    position:absolute;
    left:25%;
    top:0;
    bottom:0;
    width: 75%;
}
.map-overlay {
    position: absolute;
    width: 25%;
    top: 0;
    bottom: 0;
    left: 0;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #fff;
    max-height: 100%;
    overflow: hidden;
}

.map-overlay fieldset {
    display: none;
    background: #ddd;
    border: none;
    padding: 10px;
    margin: 0;
}

.map-overlay input {
    display: block;
    border: none;
    width: 100%;
    border-radius: 3px;
    padding: 10px;
    margin: 0;
}

.map-overlay .listing {
    overflow: auto;
    max-height: 100%;
}

.map-overlay .listing > * {
    display: block;
    padding: 5px 10px;
    margin: 0;
}

.map-overlay .listing a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #404;
    text-decoration: none;
}

.map-overlay .listing a:last-child {
    border: none;
}

.map-overlay .listing a:hover {
    background: #f0f0f0;
}  
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css' rel='stylesheet' />
    
<div id='map'></div>
<div id='map2'></div>

Комментарии:

1. По-прежнему отображается только одна карта, вторая не отображается.

2. дайте мне секунду, плз

3. Извините за задержку, решено?