javascript - Google Maps Javascript API - 图例最大高度

Question

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

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

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

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

我知道这是一个非常开放的问题，但我将不胜感激任何人可以提供的任何帮助或指示。

提前致谢。

标签： javascripthtmlcssgoogle-maps-api-3

Answer 1

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

    .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 会更改以隐藏一些非必要的控件，因此我添加了屏幕高度断点来满足这一点。

希望这可以帮助某人。