Вставить Mapbox Swiping Maps на HTML - PullRequest
Новая
       14

Вставить Mapbox Swiping Maps на HTML

2 голосов
/ 09 апреля 2019

Я пытаюсь вставить скользящую карту на страницу HTML.Прямо сейчас карта будет плавать поверх других элементов.Что я должен сделать, чтобы карта появилась внутри одного из контейнеров?

Я пытаюсь удалить строку .map {position: absolute}, но затем карта перестает отображаться вообще.Я также пытался убедиться, что другие CSS-файлы, связанные в HTML, не перекрывают стиль карты. 

<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}

.map {
/*position: absolute;
top: 500px;
bottom: 0;*/
width: 80%;
}

body {
overflow: hidden;
}

body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

</style>

<body>
  <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
    <h2 class="w3-wide">Guangzhou</h2>
    <p class="w3-opacity"><i></i></p>
    <hr>
    <div id='slidemap-cont'>
      <div id='before' class='map'></div>
      <div id='after' class='map'></div>
    </div>
  </div>

<script>
mapboxgl.accessToken = 'MY_ACCESS_TOKEN';
var beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/estella213439/cju7drf1x1zr41flvd51t9adb',
center: [113.33833,23.08506],
zoom: 12
});

var afterMap = new mapboxgl.Map({
container: 'after',
style: 'mapbox://styles/estella213439/cju7af6q42ia21fqbv7ffas1g',
center: [113.33833,23.08506],
zoom: 12
});

var map = new mapboxgl.Compare(beforeMap, afterMap, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});

</script>
</body>

1 Ответ

0 голосов
/ 09 апреля 2019

Если вам нужно, чтобы они оба были position: absolute;, то вам нужно указать top, чтобы ваш второй элемент совпадал с высотой первого 

.map {
  position: absolute;
  width: 80%;
  height: 50%;
}

#before {
  top: 0;
}

#after {
  top: 50%; // Must match height of before element
  padding-top:5px; //So you can see where one map stops and the other begins.
}

Вот вам JSFiddle с вашим примером для демонстрации.

...