Javascript Can'；当调整div的大小时，不要让Google地图高度自动调整大小

我正在使用AngularJS、jQueryUI（带有一个用于调整大小的自定义指令）和引导。在我的页面上，谷歌地图显示在顶部，表格将显示在底部。当用户调整底部区域的大小时，我希望Google地图自动调整大小以占用剩余空间

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

• 设置

  html，主体{height:100%；width:100%}

  和

  #mapCanvas{height:100%}

• 使用flexbox和flexgrow
• 调整底部部分的大小后，计算顶部部分的大小，并基于此动态更改

  #mapCanvas

  元素的高度

但是这些我都没有运气。如有任何建议，将不胜感激。下面是一个例子来说明这个问题

JSFIDLE（如果代码段区域被Google Maps API关键警告遮挡）：

函数initMap（）{
让mapOptions={
缩放：8，
minZoom:8，
中心：新google.maps.LatLng（43，-81），
mapTypeId:google.maps.mapTypeId.ROADMAP，
};
map=new google.maps.map（document.getElementById（'mapCanvas'）、mapOptions）；
}
让app=angular.module（“maapp”['ui.bootstrap']）；
app.directive（'可调整大小'，function（））{
返回{
限制：“A”，
范围：{
回调：“&onResize”
},
链接：函数postLink（范围、元素、属性）{
可调整大小的元素({
“句柄”：{
“n”：“.ui-resizable-n”
}
});
}
};
});
app.controller（“MapAppController”，函数（$scope）{
initMap（）；
});
html，
身体{
身高：100%；
宽度：100%；
}
#地图画布{
/*身高：100%*/
高度：60vh；
}
.ui-可调整大小-n{
边框顶部：5px纯色灰色；
}
.桌子{
背景：#fff；
}

底部内容部分
将上部元素设置为可调整大小，并侦听
调整大小
事件，然后将地图容器高度设置为已调整大小的元素高度

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

完全工作的小提琴。
通过将上部元素设置为可调整大小，并侦听
调整大小
事件，并将地图容器高度设置为已调整大小的元素高度

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

全工作小提琴。
您只需获得桌子的实际高度并使用此代码即可

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

希望这有帮助
 您只需获得桌子的实际高度并使用此代码即可

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

希望这有帮助
 我在地图顶部有一个菜单栏。当我添加一些几何图形时，它们隐藏在我不想要的菜单栏后面。因此，我得到了菜单栏的高度，然后将其从地图的高度中删除。现在我在地图上应用了这个高度

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

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

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

您可以使用
resize
事件，并根据可调整大小的元素高度设置贴图容器高度（在本例中，顶部区域可调整大小…）@Upsidown先生太完美了！这个解决方案非常有效。我只需要稍微调整一下计算，以解释我在页面顶部的一个div。如果您想发布您的评论作为答案，我很乐意接受。您可以使用
resize
事件，并根据可调整大小的元素高度设置地图容器高度（在本例中，顶部部分可调整大小…）@Upsidown先生太完美了！这个解决方案非常有效。我只需要稍微调整一下计算，以解释我在页面顶部的一个div。如果你想把你的评论作为答案发表，我很乐意接受获取表格高度？好的，是这样的，然后我们给地图一个新的高度。那么你提供一个完整的工作片段，让我们看看你的解决方案是如何工作的呢？
$（'body'）.height（）获取表格高度？好的，是这样的，然后我们给地图一个新的高度。那么你提供一个完整的工作片段，让我们看看你的解决方案是如何工作的呢？