在HTML上嵌入Mapbox滑动地图
在HTML上嵌入Mapbox滑动地图
提问于 2019-04-10 01:00:27
我正在尝试嵌入一个滑动地图到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 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
Stack Overflow用户
发布于 2019-04-10 01:22:11
如果需要它们都为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，用于演示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55597828
复制相关文章
相似问题