Google Maps Javascript API - легенда Макс. Высота - PullRequest
Новая
       7

Google Maps Javascript API - легенда Макс. Высота

0 голосов
/ 24 января 2020

Я отображаю карту с помощью API Карт Google Javascript и создал собственную легенду для включения и выключения определенных путей / маркеров карты. Данные в легенде загружаются PHP с использованием записей в базе данных, поэтому я не могу контролировать, сколько флажков будет присутствовать. В настоящий момент div легенды расширяется по мере необходимости, чтобы вместить любое количество флажков, но я стараюсь не допустить его расширения за пределы карты.

В данный момент моя легенда отображается следующим образом : Map

И когда я перемещаю нижнюю часть браузера вверх, чтобы уменьшить высоту экрана, он выводит aws div за нижнюю часть экрана: Map Clipped

Кто-нибудь знает способ сказать div не расширяться вертикально за край карты? Очевидно, я мог бы установить значение max-height на основе высоты карты минус верхняя позиция легенды div, но я ищу что-то немного более родное, возможно, по линиям map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend'));, но для установки самое нижнее значение? Таким образом, карта может корректироваться по мере необходимости даже на мобильных или небольших экранах (как на втором снимке экрана, где Google lo go отображается поверх легенды).

Я знаю, что это очень открытый вопрос, но Буду признателен за любую помощь или указание, которые может дать любой.

Заранее спасибо.

1 Ответ

0 голосов
/ 12 февраля 2020

В итоге я воспользовался функцией 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 изменяется, чтобы скрыть некоторые несущественные элементы управления, поэтому я добавил точку останова высоты экрана, чтобы учесть это.

Надеюсь, это кому-нибудь поможет.

...