Wie kann verhindert werden, dass Google Maps verschwindet, wenn es in einen 100 %-Container eingebettet wird?

Anpassen der Google Maps-Containerabmessungen für eine optimale Anzeige

Beim Einbetten von Google Maps in eine Webseite mit API v3 wird die Breite und Höhe des Container-DIV auf 100 % festgelegt. kann dazu führen, dass die Karte verschwindet. Um dieses Problem zu lösen, ist es wichtig, die Anforderungen für eine ordnungsgemäße Kartenwiedergabe zu verstehen.

Das Hauptproblem ergibt sich aus den widersprüchlichen Anforderungen, Breite und Höhe auf 100 % einzustellen und gleichzeitig automatische Ränder zu verwenden. Um eine 100-prozentige Abdeckung der Seite zu erreichen, ist es wichtig, die Breite und Höhe der übergeordneten Container auf 100 % einzustellen. Dadurch kann der Kartencontainer diese Werte erben und den gewünschten Platz belegen.

Zum Beispiel müssen Sie CSS-Regeln wie die folgenden hinzufügen, um sicherzustellen, dass die Elemente „body“, „HTML“ und „#content“ einen 100-prozentigen Wert haben. Breite und Höhe:

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

div#content {
  width: 100%;
  height: 100%;
}</code>

Durch Festlegen der Abmessungen der übergeordneten Container erstellen Sie ein festes Layout, bei dem der Kartencontainer die Breite und Höhe erben und so die Karte richtig anzeigen kann. Denken Sie daran, einen absoluten Wert für die Breite und Höhe des #content-Div festzulegen, um automatische Anpassungen basierend auf untergeordneten Elementen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Google Maps verschwindet, wenn es in einen 100 %-Container eingebettet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!