角谷歌地图填充空间
Posted
技术标签:
【中文标题】角谷歌地图填充空间【英文标题】：Angular google map fill space 【发布时间】：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？没关系..你可以更新你的问题）有什么问题？ 感谢您的修复。我的问题是（如我的帖子中所述），我无法让地图填充剩余空间，即我不想为地图的高度设置固定大小。 【参考方案1】：您可以通过将#main的position设置为absolute来实现，如下代码：
附：固定大小的一件事是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
【讨论】：
什么限制了导航高度，以便地图的固定顶部像素始终有效？ 这太近了；但是，它仍然无法正常工作。一旦我将任何其他元素添加到#main 分区，就会出现滚动条（请参阅我更新的问题）。 @curob 在这种情况下你想做什么？ 我希望新元素（比如“TEST
”）占用其正常数量的空间，并且地图占用剩余空间而没有滚动条，但也没有留下任何可用空间。【参考方案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>
【讨论】：
这不起作用（出于某种原因）。当我在代码中使用地图时，地图的高度仍然为 0。 对不起，我已经有一段时间没有搞砸了，你可以为 ui-gmap 指令操作底层的 css。以上是关于角谷歌地图填充空间的主要内容，如果未能解决你的问题，请参考以下文章
当我在谷歌地图上标记时如何获取地址的所有详细信息。然后它将在颤动中填充文本框