Question

如何从谷歌地图中删除白色网格线？我添加了zoom：0.7 css属性来映射div，从我的研究中，这些属性都添加了白线。

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

这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

以下是它的外观：

Answer 1

这是因为您正在缩放地图。尝试添加变换样式：preserve-3d;然后将Z轴上的项目转换为比例。

如果你这样做：

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

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

translateZ（-30vw）说，视口宽度的30％。我有一些啤酒，但我认为这可能与0.7变焦相同，这是根据项目宽度（100％视口宽度）计算的。

然后只需使用比例尺，直到您处于所需的合成缩放级别。

Answer 2

注意：将（500px）更改为（自动）

更改此样式 - 全屏显示地图中心。

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  transform-style:preserve-3d;
  transform:perspective(auto) translateZ(-30vw) scale(1.4);
  perspective:1000;     
}

样本

Google Map - full screen

Answer 3

为了节省你一些时间，我不相信你想通过CSS变换黑客或zoom（禁止 - 否）来实现。您正在与平台特定的硬件渲染，Google的地图渲染引擎，浏览器实现类型等正面斗争，而您所拥有的只是一些CSS规则来解决这三个巨头。

简而言之，例如：即使您在Mac上的Chrome中运行正常，Windows上的Firefox仍可能会显示磁贴边界或其他文物。

更具建设性，您可能想尝试Leaflet.js，它会为您提供更多选项并控制您的地图，并允许您使用支持非整数缩放级别的切片。 / p>

Answer 4

避免空白行的最佳方法是在聚合缩放中强制使用整数值。地图调用中的zoom :5可以zoom: 4来模仿CSS中zoom: 0.7的效果。

如果您通过计算获得该数字，请务必将其放入Math.round。

实际上，zoom: 4与地图的外观不同，但您不能在该属性中使用浮点字段。如果你想删除空行，最好直接通过谷歌地图的zoom属性来缩放地图，因为css zoom是一个不推荐使用的旧式IE属性，应该避免

https://css-tricks.com/almanac/properties/z/zoom/

https://developers.google.com/maps/documentation/static-maps/intro#Zoomlevels

此外，地图的中心现在位于地图视图的中心。

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  -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 5

如果有人仍然像我今天一样面临同样的问题；

如果Windows 10显示设置中的显示比例不是100％，则可能会出现随机的网格/垂直/水平线。这也仅影响Chrome。

Answer 6

我的地图也遇到了同样的问题，并得到了CSS解决方案：

const theme = createMuiTheme({
  breakpoints: {
    values: {
    md: 1100
    }
  } ,
  typography: {
    useNextVariants: true
  }
});

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  </Provider>, document.getElementById('root')
);

Answer 7

我刚刚做

#map img[role=presentation] {
  width:257px !important;
  height: 257px !important;
}

Answer 8

检查一下，它可能对你有帮助

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Showing/Hiding overlays</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      // This example adds hide() and show() methods to a custom overlay's prototype.
      // These methods toggle the visibility of the container <div>.
      // Additionally, we add a toggleDOM() method, which attaches or detaches the
      // overlay to or from the map.

      var overlay;

      USGSOverlay.prototype = new google.maps.OverlayView();

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {lat: 62.323907, lng: -150.109291},
          mapTypeId: 'satellite'
        });

        var bounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(62.281819, -150.287132),
            new google.maps.LatLng(62.400471, -150.005608));

        // The photograph is courtesy of the U.S. Geological Survey.
        var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
        srcImage += 'examples/full/images/talkeetna.png';

        overlay = new USGSOverlay(bounds, srcImage, map);
      }

      /** @constructor */
      function USGSOverlay(bounds, image, map) {

        // Now initialize all properties.
        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;

        // Define a property to hold the image's div. We'll
        // actually create this div upon receipt of the onAdd()
        // method so we'll leave it null for now.
        this.div_ = null;

        // Explicitly call setMap on this overlay
        this.setMap(map);
      }

      /**
       * onAdd is called when the map's panes are ready and the overlay has been
       * added to the map.
       */
      USGSOverlay.prototype.onAdd = function() {

        var div = document.createElement('div');
        div.style.border = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';

        // Create the img element and attach it to the div.
        var img = document.createElement('img');
        img.src = this.image_;
        img.style.width = '100%';
        img.style.height = '100%';
        div.appendChild(img);

        this.div_ = div;

        // Add the element to the "overlayImage" pane.
        var panes = this.getPanes();
        panes.overlayImage.appendChild(this.div_);
      };

      USGSOverlay.prototype.draw = function() {

        // We use the south-west and north-east
        // coordinates of the overlay to peg it to the correct position and size.
        // To do this, we need to retrieve the projection from the overlay.
        var overlayProjection = this.getProjection();

        // Retrieve the south-west and north-east coordinates of this overlay
        // in LatLngs and convert them to pixel coordinates.
        // We'll use these coordinates to resize the div.
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

        // Resize the image's div to fit the indicated dimensions.
        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
      };

      USGSOverlay.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
      };

      // Set the visibility to 'hidden' or 'visible'.
      USGSOverlay.prototype.hide = function() {
        if (this.div_) {
          // The visibility property must be a string enclosed in quotes.
          this.div_.style.visibility = 'hidden';
        }
      };

      USGSOverlay.prototype.show = function() {
        if (this.div_) {
          this.div_.style.visibility = 'visible';
        }
      };

      USGSOverlay.prototype.toggle = function() {
        if (this.div_) {
          if (this.div_.style.visibility === 'hidden') {
            this.show();
          } else {
            this.hide();
          }
        }
      };

      // Detach the map from the DOM via toggleDOM().
      // Note that if we later reattach the map, it will be visible again,
      // because the containing <div> is recreated in the overlay's onAdd() method.
      USGSOverlay.prototype.toggleDOM = function() {
        if (this.getMap()) {
          // Note: setMap(null) calls OverlayView.onRemove()
          this.setMap(null);
        } else {
          this.setMap(this.map_);
        }
      };

      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  </head>
  <body>
<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id="floating-panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>
    <div id="map"></div>
  </body>
</html>

删除因缩放导致的Google地图上的网格线

8 个答案: