为什么我的地图只显示50％

我已经在地图框中创建了地图并将其放置在我的网站上。出于某种原因，我的网站上只显示地图的50％。为什么我的地图只显示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代码：

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

下面是截图我的问题：

来源

2017-07-26 Sean Konig

html, 
body, 
#map { 
width:100%; 
height:100%, 
position:absolute; 
margin:0; 
z-index:1; 
}

，我认为有必要明确地指定地图的高度在那里，你的情况是600px的。尝试使用上面的代码。注意：由于z指数为1，任何小于1的z将被隐藏起来

来源

2017-07-26 11:17:46 Arun

-2

 <style>   
     #map { 
     height: 100%; 
     width:100%; 
     } 
     html, body { 
     height: 100%; 
     width:100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style>

来源

2017-07-26 09:00:38

也许这对其他人有帮助，如果你只是简单地解释一下你编辑的代码是什么？ –

在您的代码中添加此css –

虽然我仍然有同样的问题。 –

为什么我的地图只显示50％

回答

相关问题