如何在 ngMap 中将谷歌地图设置为 100% 高度答案

【问题标题】：how to set google maps to 100% height in ngMap如何在 ngMap 中将谷歌地图设置为 100% 高度
【发布时间】：2016-09-13 21:38:40
【问题描述】：

嘿，我正在使用ngMap 来显示谷歌地图组件。现在举一个非常基本的例子，我正在使用引导程序并尝试将谷歌地图放在屏幕的一半上，因此我给它 col-lg-6。

但显然我总是得到相同的高度，即 300 像素。我希望谷歌地图组件的高度为 100%，而不是固定高度（根本没有响应）。这是我正在谈论的代码：

这里有一个问题：http://plnkr.co/edit/BQgMe5EQiFBmojgx45t5?p=preview

var app=angular.module('myapp', ['ngMap']);
  app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    var marker, map;
    $scope.$on('mapInitialized', function(evt, evtMap) {
      map = evtMap;
      marker = map.markers[0];
    });
    $scope.centerChanged = function(event) {
      $timeout(function() {
        map.panTo(marker.getPosition());
      }, 3000);
    }
    $scope.click = function(event) {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    }
  }]);

.map .panel-body {
  padding: 0;
}

<html ng-app="myapp">

<head>
  <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
  <script src="http://code.angularjs.org/1.2.25/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div ng-controller="EventSimpleCtrl" class="ng-scope">
    <div class="row">
      <div class="col-lg-6">
        <!--<div class="panel panel-primary map">-->
        <!--  <div class="panel-heading">Test</div>-->
        <!--  <div class="panel-body">-->
        <!--    <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">-->
        <!--      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>-->
        <!--    </map>-->
        <!--  </div>-->
        <!--</div>-->
      </div>
      <div class="col-lg-6">
        <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
          <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
        </map>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

请帮帮我.....

标签： javascript css twitter-bootstrap google-maps ng-map

【解决方案1】：

别担心。一个问题 = 一个解决方案。

css：

.map{width:100%;} .panel-body {width:100%;}

html：

  <div ng-controller="EventSimpleCtrl" class="ng-scope">
<div class="container"></div>
<div class="row">
  <div class="col-md-12">
    <!--<div class="panel panel-primary map">-->
    <!--  <div class="panel-heading">Test</div>-->
    <!--  <div class="panel-body">-->
    <!--    <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">-->
    <!--      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>-->
    <!--    </map>-->
    <!--  </div>-->
    <!--</div>-->
    <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
    </map>
          </div>
  </div>
  </div>

我希望我回答了你的问题。我在你的 Plunker 链接上测试了一下，没问题。

【讨论】：

为什么是宽度，我问的是高度而不是宽度
请给我一个 jsfiddle 或一个 plunker，你的解决方案不起作用
这不是 100% 的高度，而是给它一个固定的高度，这不利于响应问题。