CSS:谷歌地图倾斜视图

Question

我正在尝试使用CSS来更改谷歌地图容器的角度，使其处于倾斜视图模式。

我遇到的问题是地图视图是倾斜的，但即使地图容器元素的宽度设置为 100%，页面顶部也是空的。

这是一个工作的小提琴

这是CSS代码：

#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;
 }

有人可以让我知道是否有办法解决这个问题，以便地图处于倾斜视图中但覆盖整个页面？

请注意，谷歌地图仅支持混合和卫星视图的倾斜视图，而不是我正在使用的路线图视图。

提前谢谢。

Answer 1

您可以处理 px 而不是 % see 的维度，并且地图的位置 http://jsfiddle.net/apqpw08u/

例如：

#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;
}

或以 % 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;
}