gpt4 book ai didi

css - 为什么我的 map 只显示 50%

转载 作者:行者123 更新时间:2023-11-28 15:40:25 25 4
gpt4 key购买 nike

我在 mapbox 中创建了一张 map 并将其放置在我的网站上。由于某种原因,只有 50% 的 map 显示在我的网站上。

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

这是我的问题的截图:

enter image description here

最佳答案

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

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

关于css - 为什么我的 map 只显示 50%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45322079/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com