是否可以使用 css 设置 div 样式以显示在 Google Maps API 的全屏地图上？答案

【问题标题】：Is it possible to use css to style a div to appear over the full screen map from the Google Maps API?是否可以使用 css 设置 div 样式以显示在 Google Maps API 的全屏地图上？
【发布时间】：2018-08-28 02:54:38
【问题描述】：

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

我发现此问题的所有解决方案都适用于地图在浏览器中全屏显示的情况，但在我的情况下，我需要它适用于地图合法全屏显示到屏幕边缘的情况。无论我给 .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>

$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%;
}

【问题讨论】：

您有此应用的演示网址吗？或者你可以为它创建一个 working sn-p / fiddle / bin 吗？顺便说一句，您不需要使用所有代码（角度等）创建 sn-p，只需模拟情况..
这是一个相当大的项目，它使用多个 html 文件与 AngularJS 混为一谈。我不太确定我将如何开始将它转移到像 codepen 这样的东西上。
您是否尝试向按钮添加 on.("click", 事件以使其全屏显示？您可以在单击时将 display:none 添加到包含地图的 div 中？跨度>
一个非常基本的 JSFiddle 这里显示了我的意思 - jsfiddle.net/Rockhopper92/e8602jyv
这样的？ jsfiddle.net/4mtyu/4806 在固定位置也能正常工作。

标签： jquery css angularjs google-maps google-maps-api-3

【解决方案1】：

Google Maps JavaScript API 不提供任何用于检测全屏模式的事件，但您可以为此目的使用Fullscreen API。这个想法是在您的文档上收听fullscreenchange 事件。进入全屏模式后，将您感兴趣的 div 移动到自定义地图控件数组中，使其显示在地图顶部，一旦您离开全屏模式，将 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/

我希望这会有所帮助！

【讨论】：