Question

我正在使用AngularJS，jQuery UI（带有用于调整大小的自定义指令）和Bootstrap。在我的页面上，谷歌地图出现在顶部，而表格将出现在底部。当用户调整底部大小时，我希望Google Map自动调整大小以占用剩余空间。

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

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

但是我没有这些运气。任何建议，将不胜感激。以下是演示此问题的示例。

JSFiddle（如果代码段区域被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>

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

完整的小提琴here。

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

Answer 3

我想如果您将地图和表格分成另一个表格，如下图所示：

并应用本文中的脚本：How to create table with resizable row and columns ...可能会起作用。那就是我的建议，希望对您有帮助。

Answer 4

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

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

希望这会有所帮助！

调整div大小后无法自动调整Google Map高度

4 个答案: