将图表与地图结合起来

Question

我创建了一个显示远程主机位置的地图和一个显示每个设备温度的图表。借助Bootstrap，我将地图和图形分为两部分：

要创建地图，请使用Leaflet.js，要创建图形，请使用Chart.js。一切正常，但是如何使地图适合整个屏幕尺寸，并且图形将位于角落的某个地方。

要使地图延伸到全屏，我使用以下代码：

$(window).on("resize", function (){
    $("#mapId").height($(window).height());
}).trigger("resize");

如果这不可能或非常困难，如何制作一个位于地图角落的菜单。我不想从Bootstrap创建导航栏，我只想拥有整个屏幕尺寸的地图。例如，Google地图在左上角带有下拉菜单进行搜索：

我尝试了类似的操作，但是无法在地图顶部设置下拉菜单：（

Answer 1

不需要javascript。只需对三个实体使用此.css样式，并根据需要进行调整即可：

#menu {
    position: absolute;
    top: 0px;
    height: 32px;
    width: 100vw;
}
#map {
    position: absolute;
    float: left;
    top: 32px;
    bottom: 0px;
    width: 60vw;
}
#graph {
    position: absolute;
    width: 40vw;
    left: 60vw;
    top: 32px;
    bottom: 0px;
}