2016-07-14 4 views
1

Ich versuche CSS zu verwenden, um den Winkel des Google Maps-Containers so zu ändern, dass er sich im Neigungsansichtsmodus befindet.CSS: Google Maps Tilt View?

Das Problem, das ich habe, ist, dass die Kartenansicht geneigt ist, aber der Anfang der Seite leer ist, obwohl die Breite des Kartencontainerelements auf 100% gesetzt ist.

Dies ist ein Arbeits FIDDLE

Und dies ist der CSS-Code:

#map-canvas { 
    height: 100%; 
    width: 100%; 
    position:absolute; 
    -webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    -moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    -o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
} 

Könnte jemand bitte lassen Sie mich wissen, ob es einen Weg gibt, um dieses Problem zu erhalten, so dass die Karte in der Neigung Ansicht ist aber deckt die gesamte Seite ab?

Hinweis: Google Maps unterstützt die Tilt-Ansicht nur für die HYBRID- und Satellitenansicht und nicht für die ROADMAP-Ansicht, die ich verwende.

Vielen Dank im Voraus.

Antwort

1

Sie können sich auf die Dimension in Pixel arbeiten und nicht in% see und die Position der Karte http://jsfiddle.net/apqpw08u/

zB:

#map-canvas { 
height: 1000px; 
width: 2000px; 
position:absolute; 
left: -500px; 
top: -500px; 
-webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
} 

oder in% http://jsfiddle.net/apqpw08u/3/

#map-canvas { 
height: 200%; 
width: 200%; 
position:absolute; 
left: -50%; 
top: -50%; 
-webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
} 
+0

ich die Notwendigkeit Breite und Höhe in%. Ich kann dem Kartencontainer keine px Breite und Höhe geben, da die Mitte der Karte in kleinen Bildschirmen verloren geht (auch in deiner Geige demonstriert). – Jackson

Verwandte Themen