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 徽標顯示在圖例上方）。

我知道這是一個非常開放的問題，但我很感激任何人可以提供的任何幫助或指示。

提前致謝。

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 會更改以隱藏一些非必要控件，因此我添加了屏幕高度斷點來滿足此要求。

希望這可以幫助某人。