我正在尝试在使用Bootstrap进行样式设置的Web应用程序中使用Angular Google Map。现在我只想尝试一个基本的例子，它显示一个由导航栏和谷歌地图组成的网页（使用Angular＆＃39; s ui-gmap-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-google-map-container { height: 400px; }之类的内容。这不是我想要的，因为这是一个固定的大小，并没有填补剩余的空间。.angular-google-map-container { height: 100vh; }已关闭，但不会考虑已存在的任何其他内容（如导航栏）。因此，整个页面长度变为视图高度的100％+所有其他项目的高度（这会产生滚动条）。.angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; }（请参阅here）是我得到的最接近的看起来就像它做的那样正确。 然而，经过仔细检查，显然有些东西真的搞砸了，这只是一个黑客攻击。例如，Chrome的检查工具显示包含.angular-google-map-container（例如#main）的分区的高度为零，即使他们的孩子（相关的地图元素）很大。此外，地图占据了整个网页（导航栏似乎是按照z顺序将其置于地图顶部），而不是占用剩余空间。如果这是一个愚蠢的问题，我道歉。每当我必须做任何CSS工作时，我都会发现自己正在抨击我所看到的一切。使用Swing，Android等做类似的事情是非常简单的，我希望在这里有一个类似的简单方法。
Here是对此的测试。
答案 0 :(得分：0)
您可以通过将#main＆＃39; s position设置为absolute来实现以下代码：
P.S。固定大小的一件事是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>
答案 1 :(得分：0)
通常我已经完成了我的需要：
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>