角谷歌地图填充空间

Question

角谷歌地图填充空间

cur*_*rob 5 html css google-maps-api-3 twitter-bootstrap angularjs

我正在尝试在使用 Bootstrap 进行样式设置的 Web 应用程序中使用 Angular Google Map。现在，我只是想获得一个基本示例，该示例显示一个网页，该网页由一个导航栏和一个ui-gmap-google-map占据所有剩余空间的谷歌地图（使用 Angular 的元素）组成。但是，除了不考虑屏幕上其他元素大小的固定高度之外，我无法让 Google 地图具有任何其他内容。

下面是我的代码：

地图沙盒.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>

Run Code Online (Sandbox Code Playgroud)

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'
      });
});

Run Code Online (Sandbox Code Playgroud)

css/style.css

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

Run Code Online (Sandbox Code Playgroud)

我知道这是一个非常常见的问题；但是，我提出的修复方案都没有奏效。我查看了以下解决方案并解决了我的问题：

在官方角度教程表明，像.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; } (see here ) 是我得到的最接近的，看起来它做对了。然而，经过仔细检查，很明显有些事情真的搞砸了，这只是一个黑客。例如，Chrome 的检查工具显示包含.angular-google-map-container(eg #main)的分区的高度为零，即使它们的子元素（所讨论的地图元素）很大。此外，地图占据了整个网页（导航栏似乎被赋予了将其放在地图顶部的 az 顺序），而不是仅占据剩余空间。

如果这是一个愚蠢的问题，我深表歉意，每当我必须做任何 CSS 工作时，我都会发现自己的头撞到了眼前的一切。用 Swing、Android 等做类似的事情非常简单，我希望这里有一种类似的简单方法可以做到这一点。

这是一个测试。

Answer 1

Mos*_*Feu 0

您可以通过将#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'
  //});
});

Run Code Online (Sandbox Code Playgroud)

/* 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%;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，7 月前
查看次数：	2309 次
最近记录：	9 年，6 月前