调整 div 大小时无法让 Google 地图高度自动调整大小
Posted
技术标签:
【中文标题】调整 div 大小时无法让 Google 地图高度自动调整大小【英文标题】：Can't get Google Map height to automatically resize when div is resized 【发布时间】：2019-11-29 15:04:37 【问题描述】：我正在使用 AngularJS、jQuery UI（带有用于调整大小的自定义指令）和 Bootstrap。在我的页面上，谷歌地图出现在顶部，表格将出现在底部。当用户调整底部的大小时，我希望谷歌地图自动调整大小以占用剩余空间。
我尝试了几种不同的方法，包括：
设置html, body height: 100%; width: 100% 和#mapCanvas height: 100% 。
使用 flexbox 和 flexgrow。
在底部调整大小后计算顶部的大小，并在此基础上动态更改#mapCanvas元素的高度。
但我没有运气。任何建议，将不胜感激。下面是一个演示该问题的示例。
JSFiddle（如果 sn-p 区域被 Google Maps API 密钥警告遮挡）：https://jsfiddle.net/jmg157/9odt0hLn/
function initMap()
let mapOptions =
zoom: 8,
minZoom: 8,
center: new google.maps.LatLng(43, -81),
mapTypeId: google.maps.MapTypeId.ROADMAP,
;
map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
let app = angular.module("mapApp", ['ui.bootstrap']);
app.directive('resizable', function()
return
restrict: 'A',
scope:
callback: '&onResize'
,
link: function postLink(scope, elem, attrs)
elem.resizable(
"handles":
"n": ".ui-resizable-n"
);
;
);
app.controller("MapAppController", function($scope)
initMap();
);html,
body
height: 100%;
width: 100%;
#mapCanvas
/*height: 100%;*/
height: 60vh;
.ui-resizable-n
border-top: 5px solid grey;
.table
background: #fff;
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
</head>
<body ng-app="mapApp">
<div ng-controller="MapAppController">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="mapCanvas"></div>
</div>
</div>
<div class="row" resizable>
<div class="ui-resizable-n ui-resizable-handle"></div>
<div class="col-md-12 col-xs-12">
Bottom Content Section
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
您可以使用resize 事件并根据可调整大小的元素高度设置地图容器高度（在这种情况下，顶部可调整大小...）。 jsfiddle.net/upsidown/dgsz4L0e
@MrUpsidown 完美！这个解决方案效果很好。我只需要稍微调整计算以考虑页面顶部的 div。如果您想发表评论作为答案，我很乐意接受。
【参考方案1】：
通过将上部元素设置为可调整大小并监听resize事件并将地图容器高度设置为调整后的元素高度。
app.directive('resizable', function()
return
restrict: 'A',
scope:
callback: '&onResize'
,
link: function postLink(scope, elem, attrs)
elem.resizable();
elem.on('resizestop', function(evt, ui)
if (scope.callback)
scope.callback();
);
elem.on('resize', function(evt, ui)
// Set map container height based on resizable element height
$('#map-canvas').height($('div[resizable]').height());
);
;
);
完整的工作小提琴here。
【讨论】：
【参考方案2】：我在地图顶部有一个菜单栏。当我添加一些几何图形时，它们隐藏在我不想要的菜单栏后面。所以我得到了菜单栏的高度，然后将它从地图的高度中删除。现在我为地图应用了这个高度。
//Setting up map with initial properties
$scope.map = new google.maps.Map(document.getElementById('map'),
zoom: 3,
center: new google.maps.LatLng(latCenter, longCenter),
fullscreenControl: false,
mapTypeControl: true,
mapTypeControlOptions:
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
,
mapTypeId: google.maps.MapTypeId.ROADMAP
);
//Restricting the zoom levels for the user
var opt = minZoom: 1, maxZoom: 16 ;
$scope.map.setOptions(opt);
//removing the top menubar height
var newHeight = $('body').height() - 41 + 'px';
//setting up the map from 100% to the new height
$('#map').css('height', newHeight);
【讨论】：
【参考方案3】：您只需要获取表格的实际高度并使用此代码即可。
var newHeight = $('body').height();
$('#map').css('height', newHeight);
希望对你有帮助！！！
【讨论】：
$('body').height(); 得到你的桌子高度？好的。
是的，然后我们给地图一个新的高度。
那你提供一个完整的工作 sn-p 怎么样，这样我们就可以看到你的解决方案是如何工作的？以上是关于调整 div 大小时无法让 Google 地图高度自动调整大小的主要内容，如果未能解决你的问题，请参考以下文章
使用 Google Maps 元素定义 div (CSS) 的百分比高度
加载后如何使用 JavaScript 调整 Google 地图的大小？