Mengapa Peta Google Saya Tidak Muncul Apabila Saya Tetapkan Div Bekas kepada 100% Lebar dan Tinggi?

Menyelesaikan Isu Saiz DIV Kontena Peta Google dengan Dimensi 100%

Apabila membenamkan Peta Google ke dalam halaman web, ia mungkin mencabar untuk mencapai DIV kontena yang menduduki sepenuhnya ruang yang ada. Isu ini timbul apabila pengguna cuba menetapkan kedua-dua sifat lebar dan tinggi DIV bekas kepada 100%, menghasilkan peta yang tidak kelihatan.

原因：

Untuk dipaparkan peta dalam DIV, Peta Google memerlukan jumlah ruang yang terhad. Menetapkan dimensi 100% mengarahkan DIV untuk mematuhi dimensi bekas induknya. Jika bekas induk itu sendiri tidak ditetapkan secara eksplisit untuk menduduki keseluruhan halaman, DIV akan dikecilkan kepada saiz yang lebih kecil, menjadikan peta tidak kelihatan.

解决方案：

Untuk menyelesaikan masalah ini, adalah perlu untuk mewujudkan rangkaian bekas induk yang semuanya mempunyai lebar 100%. Ini memastikan bahawa bekas DIV untuk peta mempunyai ruang yang mencukupi untuk mengembangkan dan memaparkan kandungannya sepenuhnya. Selain itu, tetapkan nilai berangka (cth., 700px) pada sifat ketinggian DIV bekas peta untuk memberikan ketinggian minimum untuk peta.

示例代码：

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

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

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

Dengan menetapkan badan, html dan DIV kandungan kepada 100% lebar dan tinggi, anda membuat bekas yang meliputi keseluruhan halaman. DIV map_canvas kemudiannya mengisi DIV kandungan sambil mengekalkan ketinggian 700px. Pendekatan ini memastikan peta sentiasa kelihatan dan menempati ruang yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Peta Google Saya Tidak Muncul Apabila Saya Tetapkan Div Bekas kepada 100% Lebar dan Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!