javascript - 删除由缩放引起的谷歌地图上的网格线

Question

如何从谷歌地图中删除白色网格线？我已将 zoom:0.7 css 属性添加到映射 div，根据我的研究，这些属性正在添加白线。

是否可以在不删除缩放属性的情况下从谷歌地图中删除白线？因为我需要 map 与现在完全相同。或者我们有缩放的替代方法吗？

代码如下:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    disableDefaultUI: true,
    center: {
      lat: 38.755724,
      lng: -96.492369
    }
  });

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  zoom: 0.7;
  -moz-transform: scale(0.8);
  -moz-transform-origin: 0 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

这是它的样子:

Answer 1

这是因为您正在缩放 map 。尝试添加一个 transform-style:preserve-3d;然后将 Z 轴上的元素平移以进行缩放。

如果你这样做:

transform-style:preserve-3d;
transform:perspective(500px) translateZ(-30vw) scale(1.4);
perspective:1000;

您正在扩展 UP，这应该可以避免该问题。当您缩放包含其他缩放元素的元素时会发生奇怪的事情DOWN。

translateZ(-30vw) 表示视口(viewport)宽度的 30%。我喝了几杯啤酒，但我认为这可能与 0.7 缩放相同，它是根据元素宽度(100% 视口(viewport)宽度)计算的。

然后只需调整比例，直到达到您正在寻找的合成缩放级别。