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

时间：2018-03-19 13:58:54

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

我正在使用AngularJS，HTML，CSS和JQuery创建一个Web应用程序。这个应用程序使用谷歌地图API，我需要在全屏显示时，地图顶部显示突出显示的div。

a website with a div highlighted

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

1 个答案:

答案 0 :(得分：3)

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/

我希望这有帮助！

相关问题
最新问题