调整 div 大小时无法让 Google 地图高度自动调整大小答案

【问题标题】：Can't get Google Map height to automatically resize when div is resized调整 div 大小时无法让 Google 地图高度自动调整大小
【发布时间】：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。如果您想发表评论作为答案，我很乐意接受。

标签： javascript angularjs google-maps-api-3 twitter-bootstrap-3

【解决方案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 怎么样，这样我们就可以看到你的解决方案是如何工作的？