角谷歌地图填充空间

Question

我正在尝试在使用Bootstrap进行样式设置的Web应用程序中使用Angular Google Map。 现在，我只是想获得一个基本的示例工作，该示例显示一个包含导航栏和一个Google地图（使用Angular的ui-gmap-google-map元素）的网页，该网页占用了所有剩余空间。 但是，我不能使Google Map拥有固定高度以外的任何东西，该高度不能解决屏幕上其他元素的大小。

下面是我的代码：

mapSandbox.html

<!DOCTYPE html>
<html ng-app="myApp" lang="en" ng-controller="myCtrl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome</title>

    <!--CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">
            BRAND GOES HERE
            </a>
        </div>
    </div>
</nav>

<!-- 'container-fluid' was an attempt to make the division use the full width -->
<div id="main" class="container-fluid">

    <!-- THIS IS WHAT NEEDS TO FILL THE REMAINING SPACE -->
    <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"></ui-gmap-google-map>

    <h1>Other content here</h1>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>
<script src="js/angular-google-maps.min.js"></script>
<script src="js/angular-simple-logger.js"></script>
<script src="js/mapSandbox.js"></script>
</body>
</html>

JS / mapSandbox.js

// Initialize angular
var app = angular.module('myApp', ['uiGmapgoogle-maps']);

app.controller('myCtrl', function($scope) {
    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(function (uiGmapGoogleMapApiProvider) {
      uiGmapGoogleMapApiProvider.configure({
          key: '{KEY IS HERE}',
          v: '3.22',
          libraries: 'weather,geometry,visualization'
      });
});

CSS / style.css文件

.angular-google-map-container {
    height: 100%;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

我知道这是一个非常普遍的问题。 但是，我没有进行任何提议的修复。 我研究了以下解决方案并解决了我的问题：

官方的Angular教程指出，类似.angular-google-map-container { height: 400px; } .angular-google-map-container { height: 400px; } 。 这不是我想要的，因为这是固定大小，不会填满剩余空间。
使用.angular-google-map-container { height: 100vh; } .angular-google-map-container { height: 100vh; }非常接近，只是它不考虑已经存在的其他任何内容（例如导航栏）。 结果，整个页面长度变为视图高度+所有其他项目的高度的100％（这将导致滚动条）。
使用.angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; } .angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; } .angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; } （请参阅此处）是我所获得的最接近的产品， 看起来它做对了事情。 但是，在更仔细的检查下，很明显有些东西确实被搞砸了，这仅仅是黑客。 例如，Chrome浏览器的检查工具显示，包含.angular-google-map-container （例如#main ）的#main高度为零，即使它们的子级（所涉及的地图元素）很大。 此外，地图会占用整个网页（导航栏似乎会以z顺序显示在地图顶部），而不是仅占用剩余空间。

如果这是一个愚蠢的问题，我深表歉意。我发现我每当需要进行任何CSS工作时都会碰到目光。 使用Swing，Android等执行相似的操作非常容易，以至于我希望这里有一个相似的简单方法。

这是一个测试。

Answer 1

您可以实现通过设置#main的position ，以absolute如下面的代码：

PS固定大小的一件事是top ，这是可以的，因为nav的高度在任何分辨率下都是固定的。

 var app = angular.module('myApp', ['uiGmapgoogle-maps']); app.controller('myCtrl', function($scope) { $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; }) .config(function (uiGmapGoogleMapApiProvider) { //uiGmapGoogleMapApiProvider.configure({ // key: '{KEY IS HERE}', // v: '3.22', // libraries: 'weather,geometry,visualization' //}); });

 /* Styles go here */ html, body, .wrapper { height: 100%; width: 100%; margin: 0px; } .wrapper { display: flex; flex-direction: column; } #main { /*position:absolute; width:100%; bottom:0; top:51px;*/ flex-grow: 1; position:relative; } ui-gmap-google-map, .angular-google-map,.angular-google-map-container { position:absolute; top:0; left:0; width:100%; height:100%; }

 <!DOCTYPE html> <html ng-app="myApp" lang="en" ng-controller="myCtrl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Welcome</title> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script data-require="lodash.js@*" data-semver="4.11.1" src="https://cdn.jsdelivr.net/lodash/4.11.1/lodash.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.min.js"></script> <script data-require="angular-google-maps@*" data-semver="2.0.11" src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> </head> <body> <div class="wrapper"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#/"> BRAND GOES HERE </a> </div> </div> </nav> <!-- 'container-fluid' was an attempt to make the division use the full width --> <h1>Other content here</h1> <div id="main"> <!-- THIS IS WHAT NEEDS TO FILL THE REMAINING SPACE --> <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"></ui-gmap-google-map> </div> </div> </body> </html>

http://jsbin.com/nozive/4/edit?html,css,js

Answer 2

通常，我已经完成了所需的工作：

html, body {
    height: 100%;
    font-family: Roboto, Arial, sans-serif;
}

#map-canvas {
    position: relative;
    height: 100%;
    width: 100%;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


<div id="map-canvas">
    <ui-gmap-google-map></ui-gmap-google-map>
</div>

角谷歌地图填充空间

问题描述

2 个解决方案

解决方案1
0 2016-05-25 14:23:54

解决方案2
0 2016-05-25 16:53:13

角谷歌地图填充空间

问题描述

2 个解决方案

解决方案1 0 2016-05-25 14:23:54

解决方案2 0 2016-05-25 16:53:13

解决方案1
0 2016-05-25 14:23:54

解决方案2
0 2016-05-25 16:53:13