如何在ngMap中设置谷歌地图100%的高度
how to set google maps to 100% height in ngMap
嘿,我正在使用ngMap来显示谷歌地图组件。现在,对于一个非常基本的例子,我正在使用bootstrap并尝试将谷歌地图放在屏幕的一半,因此我给它设置了coll -lg-6。
但显然我总是得到相同的高度,即300px。我希望谷歌地图组件是在100%的高度,而不是一个固定的高度(这是没有响应在所有)。这就是我要讲的代码:
这是一个问题的活塞:http://plnkr.co/edit/BQgMe5EQiFBmojgx45t5?p =
预览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>
别担心。问题=解决办法。
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链接上测试了一下,没问题。
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x,y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 在谷歌地图上绘制位置数据库
- 标记的实时更新,无需加载页面谷歌地图API V3
- 如何在谷歌地图上创建多个标记 100+
- 谷歌地图100%高度
- 如何在ngMap中设置谷歌地图100%的高度
- 当你启动Android时,谷歌地图不是100%加载的.(不总是)