斜向Google Maps地图显示异常问题求助

嘿，我懂你遇到的麻烦了——直接给#map设置skewY(0deg)根本顶不住Google Maps的内部样式，它会把你加的transform覆盖掉，导致地图还是跟着父元素倾斜。这是因为Google Maps初始化后会在#map容器里生成一堆自带样式的子元素，这些元素不受你给#map设置的transform影响。

给你两个靠谱的解决思路：

方案一：额外嵌套一层抵消容器 #

最稳妥的办法是在父容器和地图容器之间加一层额外的div，把“抵消倾斜”的transform放在这层上——Google Maps管不到这层外部的容器，所以效果能正常生效。

修改后的代码： #

HTML

<div id="diagonal">
  <div class="map-offset-wrapper">
    <div id="map"></div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

CSS

#diagonal {
  left: 0;
  right: 0;
  transform: skewY(-6deg);
  height: 40vh;
  overflow: hidden; /* 裁剪skew后溢出的部分 */
}

.map-offset-wrapper {
  width: 100%;
  height: 100%;
  transform: skewY(6deg); /* 用正6度抵消父元素的-6度倾斜 */
}

#map {
  width: 100%;
  height: 100%;
  /* 这里不用再设置transform了 */
}

JS（保持不变）

function myMap() {
  var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.roadmap
  }
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

方案二：用clip-path实现斜向效果（替代skew） #

如果你不想嵌套额外容器，也可以用clip-path直接给父容器裁剪出斜向形状，这样地图容器不需要做任何抵消操作，直接填满父容器就行：

CSS修改示例： #

#diagonal {
  left: 0;
  right: 0;
  height: 40vh;
  /* 用clip-path裁剪出左下到右上的斜向区域，数值可以根据需求调整 */
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

#map {
  width: 100%;
  height: 100%;
}

这个方法的好处是没有transform带来的元素位置偏移问题，但clip-path的兼容性需要注意（现代浏览器都支持，IE不支持）。

小提示： #

• 用方案一的时候，记得给父容器加overflow: hidden，不然skew后地图的边角会溢出到容器外面。
• 如果视觉上高度不对，可以微调父容器的height值，因为skew会改变元素的视觉高度。

内容的提问来源于stack exchange，提问作者jona