【发布时间】：2016-09-21 21:49:10
【问题描述】：
我正在尝试在使用 Bootstrap 进行样式设置的 Web 应用程序中使用 Angular Google Map。现在，我只是想获得一个基本示例，它显示了一个由导航栏和谷歌地图（使用 Angular 的 ui-gmap-google-map 元素）组成的网页，占据了所有剩余空间。但是，除了不考虑屏幕上其他元素大小的固定高度之外，我无法让 Google 地图具有其他任何内容。
下面是我的代码：
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;
}
我知道这是一个非常常见的问题；但是，我提出的修复都没有工作。我查看了以下解决方案并解决了我的问题：
-
official Angular tutorial 表示应该使用类似
.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）是我得到的最接近的方法，并且看起来 这样做是正确的。 然而，经过仔细检查，很明显有些事情确实搞砸了，这只是一个 hack。例如，Chrome 的检查工具显示包含.angular-google-map-container（例如#main）的分区的高度为零，即使它们的子元素（有问题的地图元素）很大。此外，地图占据了整个网页（导航栏似乎按 z 顺序放置在地图顶部），而不仅仅是占据剩余空间。
如果这是一个愚蠢的问题，我深表歉意，每当我必须做任何 CSS 工作时，我都会发现自己的脑袋撞到了眼前的一切。用 Swing、Android 等做类似的事情非常简单，我希望这里也有类似的简单方法。
Here 是对此的测试。
【问题讨论】：
-
你能为此创建一个 sn-p 或 bin 或 plnkr 吗？
-
已添加（但已损坏）
-
我为你做的..jsbin.com/nozive/edit?html,js,output（你为什么包含 angular2 而不是 angularJS？没关系..你可以更新你的问题）有什么问题？
-
感谢您的修复。我的问题是（如我的帖子中所述），我无法让地图填充剩余空间，即我不想为地图的高度设置固定大小。
标签： html css angularjs twitter-bootstrap google-maps-api-3