我在mapbox中创建了一个地图并将其放在我的网站上。出于某种原因,只有50%的地图显示在我的网站上。
阅读this question后,我添加了#map-container,但我仍然得到了相同的结果。
Mapbox代码:
<!--mapbox-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<!--end mapbox-->
CSS:
#map-container {
position: relative;
width: 100%;
height: 100%;
}
#map {
height: 600px;
}
HTML code:
<div id="map-container">
<div id="map"></div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/yourstyle/cj5j5jl0c0bvb2rnamu85jjfp',
center: [29.184, -28.227],
pitch: 60, // pitch in degrees
bearing: -60, // bearing in degrees
zoom: 10
});
</script>
以下是我的问题的屏幕截图:
答案 0 :(得分:0)
html,
body,
#map {
width:100%;
height:100%,
position:absolute;
margin:0;
z-index:1;
}
我认为有必要明确指定地图高度,在你的情况下它是600px。尝试使用上面的代码。 注意:由于z index为1,任何低于1的z都将被隐藏
答案 1 :(得分:-2)
<style>
#map {
height: 100%;
width:100%;
}
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 0;
}
</style>