将可折叠侧栏添加到mapbox地图

我需要在mapbox地图中添加一个可折叠的边栏

我用这个例子：

这是我的html文件。它会短暂地显示它的加载，但随后贴图会在它上面渲染

最终，我想开发一个边栏，比如当你点击谷歌地图中的一个功能时弹出的边栏。我还没有找到类似的解决方案，所以如果有人知道解决方案，请告诉我

卡斯特罗计划：侧栏
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
身体{
字体系列：“Lato”，无衬线；
}
.侧边栏{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧边栏a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧边栏a：悬停{
颜色：#f1f1；
}
.侧边栏.关闭{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
.openbtn{
字体大小：20px；
光标：指针；
背景色：#111；
颜色：白色；
填充：10px 15px；
边界：无；
}
.openbtn:悬停{
背景色：#444；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
/*在高度小于450px的较小屏幕上，更改sidenav的样式（更少的填充和更小的字体大小）*/
@媒体屏幕和屏幕（最大高度：450像素）{
.侧边栏{填充顶部：15px；}
.sidebar a{font size:18px；}
}
☰ 切换边栏
折叠边栏
单击汉堡包菜单/栏图标打开侧栏，并将此内容向右推

函数openNav（）{
document.getElementById（“mySidebar”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidebar”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}
mapboxgl.accessToken='pk.eyj1ijoibml0dhlqzwuilchijoid1rmlxpycyj9.NFk875-Fe6hoRCkGciG8yQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
中间：[0,0]，
缩放：0
});

首先，将地图添加到主div，并将地图css设置为“位置：相对” 您的打开按钮也需要是“位置：绝对”；并在地图上方设置一个1的z深度

我在html、body和map css中添加了100%的高度，以确保内容延伸到整个高度

希望这有帮助

卡斯特罗计划：侧栏
正文{margin:0；padding:0；}
#映射{
位置：绝对位置；
顶部：0；右侧：0；
底部：0；左侧：0；
宽度：100%；
身高：100%；
}
html，body，#map{
身高：100%；
边际：0px；
}
.侧边栏{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧边栏a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧边栏a：悬停{
颜色：#f1f1；
}
.侧边栏.关闭{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
.openbtn{
字体大小：20px；
光标：指针；
背景色：#111；
颜色：白色；
填充：10px 15px；
边界：无；
位置：绝对位置；
顶部：10px；
左：10px；
z指数：1；
边界半径：3px；
}
.openbtn:悬停{
背景色：#444；
}
#主要{
位置：相对位置；
过渡：左边距。5s；
填充：16px；
身高：100%；
}
/*在高度小于450px的较小屏幕上，更改sidenav的样式（更少的填充和更小的字体大小）*/
@媒体屏幕和屏幕（最大高度：450像素）{
.侧边栏{填充顶部：15px；}
.sidebar a{font size:18px；}
}   
☰ 切换边栏
函数openNav（）{
document.getElementById（“mySidebar”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidebar”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}
mapboxgl.accessToken='pk.eyj1ijoibml0dhlqzwuilchijoid1rmlxpycyj9.NFk875-Fe6hoRCkGciG8yQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
中间：[0,0]，
缩放：0
});