Warum wird meine Google-Karte nicht angezeigt, wenn ich die Container-Div auf 100 % Breite und Höhe einstelle?

Beheben von DIV-Größenproblemen bei Google Maps-Containern mit 100 %-Dimensionen

Das Einbetten einer Google Map in eine Webseite kann schwierig sein Erzielen Sie einen Container-DIV, der den verfügbaren Platz vollständig einnimmt. Dieses Problem tritt auf, wenn Benutzer versuchen, sowohl die Breiten- als auch die Höheneigenschaften des Container-DIV auf 100 % zu setzen, was zu einer unsichtbaren Karte führt.

原因：

Zur Anzeige Als Karte innerhalb des DIV benötigt Google Maps eine begrenzte Menge an Speicherplatz. Durch die Zuweisung von Abmessungen von 100 % wird der DIV angewiesen, sich an die Abmessungen seines übergeordneten Containers anzupassen. Wenn der übergeordnete Container selbst nicht explizit so eingestellt ist, dass er die gesamte Seite einnimmt, wird das DIV auf eine kleinere Größe verkleinert, wodurch die Karte unsichtbar wird.

解决方案:

Um dieses Problem zu beheben, muss eine Kette von übergeordneten Containern erstellt werden, die alle eine Breite von 100 % haben. Dadurch wird sichergestellt, dass der Container-DIV für die Karte ausreichend Platz zum Erweitern und vollständigen Anzeigen seines Inhalts hat. Weisen Sie außerdem der Höheneigenschaft des Container-DIV der Karte einen numerischen Wert (z. B. 700 Pixel) zu, um eine Mindesthöhe für die Karte bereitzustellen.

示例代码：

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

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

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

Indem Sie Text, HTML und Inhalts-DIV auf 100 % Breite und Höhe festlegen, erstellen Sie einen Container, der die gesamte Seite abdeckt. Das DIV „map_canvas“ füllt dann das Inhalts-DIV aus und behält dabei eine Höhe von 700 Pixel bei. Dieser Ansatz stellt sicher, dass die Karte immer sichtbar ist und den vorgesehenen Platz einnimmt.

Das obige ist der detaillierte Inhalt vonWarum wird meine Google-Karte nicht angezeigt, wenn ich die Container-Div auf 100 % Breite und Höhe einstelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!