在HTML上嵌入Mapbox Swiping Maps

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (65)

我试图将滑动地图嵌入到HTML页面中。现在,地图将漂浮在其他元素之上。我该怎么做才能使地图出现在其中一个容器中?

我尝试删除.map {position:absolute}行但是地图停止显示。我还试图确保HTML中链接的其他CSS文件不会覆盖地图的样式。

<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" style="max-width:800px" id="band">
    <div id='before' class='map'></div>
    <div id='after' class='map'></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>
提问于
用户回答回答于

如果你需要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与您的示例进行演示。

扫码关注云+社区

领取腾讯云代金券