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

Question

我在 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代码：

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

这是我的问题的截图：

Answer 1

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

Answer 2

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

我认为有必要明确指定地图高度，在您的情况下是 600 像素。尝试使用上面的代码。注意：由于 z 索引为 1，任何低于 1 的 z 都将被隐藏

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

Why would my map only display 50%

css

mapbox