如何將谷歌地圖設置爲ngMap中的100％高度

嘿，我正在使用ngMap來顯示谷歌地圖組件。現在是一個非常基本的例子，我使用引導程序，並嘗試將谷歌地圖放在屏幕的一半，因此我給它col-lg-6。如何將谷歌地圖設置爲ngMap中的100％高度

但顯然我得到的總是相同的高度是300px。我希望谷歌地圖組件的高度爲100％，而不是固定的高度（它根本沒有響應）。這是我講的代碼：

這是問題的一個plunker：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="[email protected]" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" 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>

來源

2016-09-13 Brk

請幫我..... – Brk

不要擔心。一個問題=一個解決方案。

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鏈接上測試它，這沒關係。

來源

2016-09-13 13:38:40

爲什麼寬度，我問的高度不是寬度 – Brk

請給我一個jsfiddle或者一個笨蛋，你的解決方案不起作用 – Brk

對不起，我讀得太快了。我正在努力。 –

如何將谷歌地圖設置爲ngMap中的100％高度

回答

相關問題