jquery - 是否可以使用 css 来设置 div 的样式，使其显示在 Google map API 的全屏 map 上？

Question

我正在使用 AngularJS、HTML、CSS 和 JQuery 制作一个 Web 应用程序。这个应用程序使用谷歌地图 API，我需要在全屏显示时让下面突出显示的 div 出现在 map 顶部。

我发现的这个问题的所有解决方案都是针对 map 在浏览器中全屏显示的情况，但就我而言，我需要它在 map 合法全屏显示到屏幕边缘时工作。无论我给 .fixed 类设置多少 z-index，div 都不会出现在谷歌地图全屏上。下面是 HTML、JS 和 CSS:

HTML

<div ng-controller="airQualityCtrl" ng-init="init()">
    <!-- Everything for the air quality page -->
    <div class="row d-flex align-items-stretch" id="input-row">
        <div class="col-7 padding-sm">
            <div class="ui-card" id="input-card">
                <div class="card-title">
                    <h2 class="title text-lg">Choose Location</h2>
                </div>
                <div class="card-content padding-top-md">
                    <div class="form-group">
                        <h3 class="bold text-md no-margin">Location</h3>
                        <input ng-model="location" ng-keyup="submitLocation($event);" class="form-control" type="text" name="location"/>
                    </div>
                    <div class="form-group">
                        <h3 class="bold text-md no-margin">Latitude / Longitude</h3>
                        <input ng-model="location" ng-keyup="submitLocation($event);" class="form-control" type="text" name="location"/>                        
                    </div>
                </div>
            </div>
        </div>
        <div class="col-5 padding-sm">
            <div class="ui-card">
                <div class="card-title">
                    <h2 class="title text-lg">Choose Date</h2>
                </div>
                <div class="card-content d-flex flex-column justify-content-center align-items-center">
                    <div id="date-picker">
                        <div class="month d-flex justify-content-between">
                            <i class="fas fa-chevron-left transitions"></i>
                            <h3 class="bold text-md no-margin text-center">March</h3>
                            <i class="fas fa-chevron-right transitions unavailable"></i>
                        </div>
                        <table>
                            <tr id="week1">
                                <td class="gray-date">25</td>
                                <td class="gray-date">26</td>
                                <td class="gray-date">27</td>
                                <td class="gray-date">28</td>
                                <td>01</td>
                                <td>02</td>
                                <td>03</td>
                            </tr>
                            <tr id="week2">
                                <td>04</td>
                                <td>05</td>
                                <td>06</td>
                                <td>07</td>
                                <td>08</td>
                                <td>09</td>
                                <td>10</td>
                            </tr>
                            <tr id="week3">
                                <td>11</td>
                                <td>12</td>
                                <td>13</td>
                                <td>14</td>
                                <td>15</td>
                                <td>16</td>
                                <td>17</td>
                            </tr>
                            <tr id="week4">
                                <td class="selected">18</td>
                                <td class="unavailable">19</td>
                                <td class="unavailable">20</td>
                                <td class="unavailable">21</td>
                                <td class="unavailable">22</td>
                                <td class="unavailable">23</td>
                                <td class="unavailable">24</td>
                            </tr>
                            <tr id="week5">
                                <td class="unavailable">25</td>
                                <td class="unavailable">26</td>
                                <td class="unavailable">27</td>
                                <td class="unavailable">28</td>
                                <td class="unavailable">29</td>
                                <td class="unavailable">30</td>
                                <td class="unavailable">31</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row d-flex align-items-stretch">
        <div class="col-7 padding-sm">
            <div class="ui-card map">
                <div id="map" class="full-size"></div>
            </div>
        </div>
        <div class="col-5 padding-sm">
            <div class="ui-card">
                <div class="card-title">
                    <h2 class="title text-lg">Results</h2>
                </div>
                <div class="card-content">
                    <div class="data">
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                        <p>Data line 1: CO2 - 30% | O2 - 50% | NaCl - 20%</p>
                    </div>
                    <h3 class="bold text-md no-margin">Filter</h3>
                </div>
            </div>
        </div>
    </div>
</div>

JS

$scope.mapInit = function() {
    //creates a map centered at Minneapolis
    $scope.map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 44.9778, lng: -93.2650}
    });

    $scope.map.addListener('bounds_changed', function() {

        var mapElement = $('#map div');
        if(mapElement.height() >= window.innerHeight && mapElement.width() >= window.innerWidth && !$scope.isFullScreen) {

            //  if the map element is fullscreen but isFullscreen has not been flagged, make the fullscreen css changes
            $scope.isFullscreen = true;
            $('#input-card').addClass('fixed');

        }

    });

    $scope.geocoder = new google.maps.Geocoder;
};

CSS

/*  COLORS

    DARK GREEN     #77997e
    GREEN          #d9f4c7
    BLUE           #a1edd5
    GRAY           #a8a8a8
    LIGHT GRAY     #f9f9f9

*/

body {
    background: #d9f4c7;
    min-height: 100vh;
    max-width: 100vw;
}

i:hover {
    cursor: pointer;
    color: #a1edd5;
}

.transitions {
    transition: all 0.2s;
}

/* CARD CSS */
.ui-card {
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    height: 100%;
}

.card-title {
    background: #77997e;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
}

.card-content {
    padding: 15px 30px 15px 30px;
}

.fixed {
    position: fixed;
        top: 5px;
        left: 5px;

    z-index: 1000;
}

.form-control {
    font-size: 1rem;
    border-radius: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #a8a8a8;
    transition: all 0.2s;
    width: 80%;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid #a1edd5;
    width: 100%;
}

.btn.form-control {
    width: 100%;
    border: 1px solid #77997e;
}

.btn-custom {
    color: black;
    margin-top: 25px;
    background: #d9f4c7;
}

.data {
    background: #f9f9f9;
    border: 1px solid #a8a8a8;
    padding: 5px;
    margin-bottom: 10px;
    overflow-y: scroll;
    width: 100%;
    height: 250px;
}


/* DATE CSS */
.month {
    padding-left: 10px;
    padding-right: 10px;
}

.map {
    height: 500px;
}

td {
    padding: 5px;
    transition: all 0.2s;
}

td:hover {
    color: #a1edd5;
    cursor: pointer;
    font-weight: 700;
}

.gray-date {
    color: #a8a8a8;
}

.selected {
    border-bottom: 2px solid #a1edd5;
    font-weight: 700;
}

.unavailable {
    color: white;
}

.unavailable:hover {
    color: white;
    cursor: default;
}

.full-size{
    width: 100%;
    height: 100%;
}

Answer 1

Google Maps JavaScript API 不提供任何用于检测全屏模式的事件，但您可以使用 Fullscreen API以此目的。这个想法是监听文档上的 fullscreenchange 事件。进入全屏模式后，将您感兴趣的 div 移动到自定义 map 控件数组中，以便它出现在 map 顶部，一旦离开全屏模式，将 div 移动到其原始位置。

看看我演示这种方法的示例

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });

    $(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
      var isFullScreen = document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      if (isFullScreen) {
        console.log('fullscreen mode!');
 map.controls[google.maps.ControlPosition.TOP_LEFT].push($("#content").get(0));
      } else {
        console.log('not fullscreen mode!');
        var elem = map.controls[google.maps.ControlPosition.TOP_LEFT].pop();
        $(elem).removeAttr("style").prependTo("body");
      }
    });
}

#map {
  height: 80%;
}
#content {
  height: 90px;
  width: 150px;  
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
  background-color:yellow;
}
#map #content {
  margin-top: 8px;
  font-size: 12px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="content">
  My content div
</div>
<div id="map"></div>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>  

您还可以在 jsfiddle 上看到这个示例: https://jsfiddle.net/xomena/arumdt4r/

希望这会有所帮助!