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

Question

我正在使用 AngularJS、jQuery UI（带有调整大小的自定义指令）和 Bootstrap。在我的页面上，Google 地图出现在顶部，table 将出现在底部。当用户调整底部部分的大小时，我希望 Google 地图自动调整大小以占据剩余的 space.

我尝试了几种不同的方法，包括：

设置 html, body { height: 100%; width: 100% } 和 #mapCanvas { height: 100% }。
使用 flexbox 和 flexgrow。
在底部调整大小后计算顶部的大小，并根据此动态更改 #mapCanvas 元素的高度。

但我在这些方面都没有运气。任何建议，将不胜感激。下面是演示该问题的示例。

JSFiddle（以防代码段区域被 Google 地图 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>

Answer 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());
      });
    }
  };
});

全职工作 fiddle here.

Answer 2

您只需要获取 table 的实际高度并使用此代码即可。

var newHeight = $('body').height();
$('#map').css('height', newHeight);

希望对您有所帮助！！！

Answer 3

我在地图顶部有一个菜单栏。当我添加一些几何图形时，它们隐藏在我不想要的菜单栏后面。所以我得到了菜单栏的高度，然后将其从地图的高度中移除。现在我将这个高度应用于地图。

//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);

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

Can't get Google Map height to automatically resize when div is resized

javascript

google-maps-api-3

angularjs

twitter-bootstrap-3