获取mapDiv123尺寸时clientHeight返回0的技术问题求助

嘿，我来帮你搞定这个获取元素尺寸的问题！先理清楚你的DOM结构和样式情况：

你的HTML结构 #

<div id="test"> 
  <div class="maps"> 
    <h2>View marker </h2> 
    <div class="the-contents" id="mapDiv123">ddddd</div> 
  </div> 
</div>

你的SCSS代码（补全你未写完的部分） #

#test { 
  background: pink; 
  .maps { 
    height: 350px; 
    display: flex; 
    flex-direction: column; 
    background: #eee; // 补全假设的背景样式
  }
}

要给Google Map设置正确大小，关键是确保元素完成渲染后再获取尺寸，否则可能拿到0或者错误的值。下面是几种实用的解决方法：

方法1：原生JavaScript（最推荐） #

用offsetWidth和offsetHeight可以直接拿到元素的实际渲染尺寸（包含padding和border，不含margin）：

// 等待DOM完全加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const mapDiv = document.getElementById('mapDiv123');
  if (mapDiv) {
    const divWidth = mapDiv.offsetWidth;
    const divHeight = mapDiv.offsetHeight;
    console.log('容器宽度：', divWidth, '容器高度：', divHeight);
    // 这里直接把尺寸传给Google Map初始化即可
    // new google.maps.Map(mapDiv, { 
    //   width: divWidth, 
    //   height: divHeight,
    //   // 其他地图配置
    // });
  }
});

如果需要更精准的视口相对位置和尺寸，可以用getBoundingClientRect()：

const rectInfo = mapDiv.getBoundingClientRect();
console.log('精准宽度：', rectInfo.width, '精准高度：', rectInfo.height);

方法2：使用jQuery（如果项目依赖jQuery） #

要是你的项目已经在用jQuery，也可以这样快速获取：

$(document).ready(function() {
  const $mapContainer = $('#mapDiv123');
  // width()/height() 获取不含padding、border的尺寸
  const containerWidth = $mapContainer.width();
  const containerHeight = $mapContainer.height();
  // 若要包含padding和border，用outerWidth()/outerHeight()
  // const containerWidth = $mapContainer.outerWidth();
  // const containerHeight = $mapContainer.outerHeight();
  console.log('容器宽高：', containerWidth, containerHeight);
});

重要提醒 #

• 必须等DOM渲染完成再执行获取代码，不然元素还没被浏览器绘制出来，拿到的尺寸会是0。
• 因为你的.maps是flex纵向布局，mapDiv123的高度会自动分配父元素350px减去<h2>高度后的剩余空间，这个获取到的高度刚好是Google Map可用的完美高度。

内容的提问来源于stack exchange，提问作者Andrew Newby