爲什麼我的地圖只顯示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％

回答

相關問題