AMap地图容器高度设为100%为什么不显示？

UE丶光磊提问于 2026-03-13 10:54:20 阅读 9

交互

我在用高德地图AMap开发时，想让地图占满整个页面，就把容器的CSS高度设成100%了，但地图完全没渲染出来，控制台也没报错。我试过给父级加高度，也试过用vh单位，但还是不行。

这是我的样式代码：

#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
html, body {
  height: 100%;
  margin: 0;
}

是不是还缺了什么设置？为什么height:100%在AMap里不生效？

地图应用

我来解答赞 2 收藏

反馈

1 条解答

诸葛艳兵 Lv1

这个问题很常见，AMap初始化时需要你显式指定尺寸参数，光靠CSS的100%不够。

解决方法很简单，在创建地图时加上 resizeEnable: true 让它监听容器尺寸变化，如果还不行就加上 viewMode: '3D' 强制3D模式：

var map = new AMap.Map('map-container', {

    zoom: 12,

    center: [116.39, 39.9],

    resizeEnable: true,

    viewMode: '3D'

});

如果这样还不行，那就直接在JS里动态设置容器高度，别依赖CSS：

document.getElementById('map-container').style.height = window.innerHeight + 'px';



var map = new AMap.Map('map-container', {

    zoom: 12,

    center: [116.39, 39.9],

    resizeEnable: true

});

另外注意一点，如果你的地图容器是在某个标签页或者display:none的元素里，初始化时是拿不到正确高度的。需要等元素显示出来后再初始化地图，或者用 map.setMapStyle 之类的强制刷新一下。

基本上加上 resizeEnable: true 就能解决大多数情况。

2026-03-13 11:02