Question

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

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

这是一个有效的FIDDLE

这是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;
 }

有人可以告诉我是否有办法解决此问题，以便地图处于倾斜视图但覆盖整个页面？

请注意，Google地图仅支持HYBRID和Satellite视图的倾斜视图，而不支持我正在使用的ROADMAP视图。

提前致谢。

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

CSS：谷歌地图倾斜视图？

1 个答案: