Question

我正在尝试使用谷歌地图位置作为页面的背景。但是，叠加层不会覆盖整个地图，地图底部会显示。

即使我尝试将map-canvas和overlay的高度设置为100vh，地图仍会超出叠加层。

＆＃13;

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(0, 0)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

＆＃13;

html, body {
  height: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
  z-index: 0;
}
.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

＆＃13;

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1izGpWuOiZ6HxUdT6HScuSa0oAxdGGj4">
</script>

<div id="map-canvas"></div>
<div class="overlay"></div>

＆＃13;

Answer 1

默认情况下，浏览器会向margin添加body，导致正文实际占用超过100％的高度（100％加上任何边距）。如果您明确删除此保证金，则会解决您的问题。这是CSS重置流行的一个很好的例子。

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(0, 0)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

html, body {
  height: 100%;
  margin: 0;
}
#map-canvas {
  height: 100%;
  width: 100%;
  z-index: 0;
}
.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1izGpWuOiZ6HxUdT6HScuSa0oAxdGGj4">
</script>

<div id="map-canvas"></div>
<div class="overlay"></div>

Answer 2

#map-canvas确实与.overlay的位置不同，因为它的位置会受到页面填充/边距的影响。

您有这些选项（可能还有更多）：

删除填充/边距：

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

当您想要保留填充/边距并希望覆盖图覆盖地图时，无论地图大小/位置如何，请使用.overlay作为#map-canvas的孩子：
```
 <div id="map-canvas"><div class="overlay"></div></div>
```
要使其有效，您还必须将地图的noClear - 选项设置为true（否则API将删除.overlay）

function initialize() {
  var mapOptions = {
    zoom: 15,
    noClear: true,
    center: new google.maps.LatLng(0, 0)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

html,
body {
  height: 100%;
}
#map-canvas {
  height: 80%;
  width: 70%;
  z-index: 0;
}
.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

<div id="map-canvas">
  <div class="overlay"></div>
</div>

在谷歌地图上添加叠加层，留下地图底部显示

2 个答案: