컨테이너 div를 100% 너비와 높이로 설정하면 Google 지도가 표시되지 않는 이유는 무엇입니까?

100% 크기로 Google 지도 컨테이너 DIV 크기 조정 문제 해결

Google 지도를 웹페이지에 삽입할 때 다음이 어려울 수 있습니다. 사용 가능한 공간을 완전히 차지하는 컨테이너 DIV를 달성합니다. 이 문제는 사용자가 컨테이너 DIV의 너비와 높이 속성을 모두 100%로 설정하려고 시도하여 지도가 보이지 않게 되는 경우에 발생합니다.

原因：

표시하려면 DIV 내의 지도인 경우 Google 지도에는 제한된 공간이 필요합니다. 100%의 크기를 할당하면 DIV가 상위 컨테이너의 크기를 따르도록 지시합니다. 상위 컨테이너 자체가 전체 페이지를 차지하도록 명시적으로 설정되지 않은 경우 DIV는 더 작은 크기로 축소되어 지도가 보이지 않게 렌더링됩니다.

解决方案：

이 문제를 해결하려면 너비가 모두 100%인 상위 컨테이너 체인을 설정해야 합니다. 이렇게 하면 지도의 컨테이너 DIV에 콘텐츠를 확장하고 완전히 표시할 수 있는 충분한 공간이 있습니다. 또한 지도의 최소 높이를 제공하려면 지도 컨테이너 DIV의 높이 속성에 숫자 값(예: 700px)을 할당하세요.

示例代码:

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%;
  height: 100vh;
}

div#map_canvas {
  height: 700px;
  width: 100%;
}</code>

본문, HTML, 콘텐츠 DIV를 너비와 높이를 100%로 설정하면 전체 페이지를 덮는 컨테이너가 생성됩니다. 그런 다음 map_canvas DIV는 700px의 높이를 유지하면서 콘텐츠 DIV를 채웁니다. 이 접근 방식을 사용하면 지도가 항상 표시되고 의도한 공간을 차지할 수 있습니다.

위 내용은 컨테이너 div를 100% 너비와 높이로 설정하면 Google 지도가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!