Google Maps Javascript API - 图例最大高度

Question

我正在使用 Google Maps Javascript API 显示地图，并创建了一个自定义图例来打开和关闭某些地图路径/标记。图例中的数据是由 PHP 使用数据库中的条目加载的，因此我无法控制存在多少复选框。目前，图例 div 会根据需要扩展以适应需要的复选框，但我希望阻止它扩展到地图范围之外。

目前，我的图例显示如下：

当我向上移动浏览器底部以降低屏幕高度时，它会将 div 绘制到屏幕底部之外：

有谁知道告诉 div 不要垂直扩展超出地图边缘的方法？我显然可以根据地图的高度设置一个 max-height 值，减去图例 div 的顶部位置，但我正在寻找更原生的东西，可能沿着map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend')); 的行但是设置最低价值？这样，即使在移动设备或小屏幕上（如第二个屏幕截图中 Google 徽标显示在图例上方），地图也可以根据需要进行调整。

我知道这是一个非常开放式的问题，但如果有人能提供任何帮助或指点，我将不胜感激。

提前致谢。

Answer 1

我最终使用 CSS calc 函数根据屏幕大小手动设置图例的最大高度。

    .mapLegend {
        height: auto;
        max-height: calc(100vh - 175px);       /* Top bar, plus height of Google logo at bottom, plus absolute top position of Legend div, plus buffer */
    }

    @media (max-height: 269px) {
        .mapLegend {
            height: auto;
            max-height: calc(100vh - 120px);    /* When screen <270px tall, some Google Maps controls are hidden, so legend moves up, so can expand further down the bottom */
        }
    }

通过将高度设置为自动，它只会根据需要容纳尽可能多的复选框，并且最大高度会阻止溢出超出屏幕底部。请注意，在小屏幕上（或者当将高屏幕拖动以降低其高度时），Google Maps UI 会更改以隐藏一些非必要的控件，因此我添加了屏幕高度断点来满足这一点。

希望这对某人有所帮助。