Google 地图 Javascript API - 图例最大高度

Question

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

目前我的图例显示如下：

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

有谁知道告诉 div 不要垂直扩展到地图边缘以外的方法吗？我显然可以根据地图的高度设置最大高度值，减去图例的顶部位置 div，但我正在寻找更原生的东西，可能是 [=13] =] 但是为了设置最低值？这样，即使在移动设备或小屏幕上，地图也可以根据需要进行调整（例如在第二个屏幕截图中 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 地图 UI 会更改以隐藏一些非必要的控件，因此我添加了屏幕高度断点以满足为此。

希望这对某人有所帮助。

Google 地图 Javascript API - 图例最大高度

Google Maps Javascript API - Legend Max Height

html

javascript

css

google-maps-api-3