Как разместить div над Google Maps и сохранить его в полноэкранном режиме? - PullRequest
Новая
       6

Как разместить div над Google Maps и сохранить его в полноэкранном режиме?

0 голосов
/ 12 апреля 2019

Я хотел бы поместить div на карту Google, даже когда карта в полноэкранном режиме.

Я уже мог разместить div перед картой, когда он не в полноэкранном режиме, номне нужно, чтобы div показывался в обоих случаях.

div, который мне нужно поместить поверх карты Google в полноэкранном режиме: .cont-items-monitor

Вот мой HTML-код: 

<div class="gx-card-body">
    <div class="cont-items-monitor overlay" style="display: none">
        <ul>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
        </ul>
    </div>

    <div id="google-map"></div>
</div>

Мой код CSS: 

.cont-items-monitor {
position: absolute;
top: 60px;
left: 0;
bottom: 30px;
z-index: 1;
background-color: white;
overflow-x: scroll;
padding: 10px 15px 10px 0;
}

1 Ответ

2 голосов
/ 12 апреля 2019

Я наконец-то смог это решить. То, что мне нужно было сделать, это поместить div, который я хочу наложить на первый div, который генерируется при инициализации карты Google.

Мой HTML-код такой же, я только переместил его с помощью jquery после загрузки всех элементов веб-сайта.

Мой HTML-код супер объяснил и подтвердил: (Представьте, что следующий код находится внутри базовой структуры HTML-страницы) 

<div class="gx-card-body">
                                    <!-- <div class="cont-fab">
                                        <a href="javascript:void(0)" class="gx-fab-btn gx-btn-primary">
                                            <i class="zmdi zmdi-account-add zmdi-hc-fw zmdi-hc-lg"></i>
                                        </a>
                                    </div> -->
                                    <div class="cont-items-monitor overlay" style="display: none">
                                        <ul>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                        </ul>
                                    </div>

                                    <div id="google-map"></div>
                                </div>

Мой код JS (jQuery): 

$(document).ready(function () {
    $('.cont-items-monitor').appendTo($('#google-map').find('div')[0]);
});

Я надеюсь, что это служит кому-то еще

...