Question

我正在尝试做类似于this question中的相关内容，其中以Google地图作为背景填充整个页面，然后在其上面添加一些内容。但不同的是，我对这个内容有两列布局，我希望它具有响应性，所以我很难将它集中在一起。

问题是地图需要有效，所以我想为它留下尽可能多的空间。我知道两列下面的地图不会起作用，但我希望其余部分都是。

如果我使用包装器使两列居中，则包装器位于地图的顶部，此地图区域不再可用（无法拖动，单击等）。

那么我可以做些什么来使两列都居中？如果有必要，我会对一些JS开放，虽然我对它很新手。

编辑：我做了一个super sketch试图帮助想象......在它上你可以看到我如何使用一个包装（透明的紫色层）并将其居中（就像我正在做的那样）其余的页面），它覆盖了标记所在地图的中心部分。

Answer 1

我不知道你怎么能拥有一个内容完整的功能性地图。要使内容可见，它必须具有更高的z-index，这将反过来掩盖地图中的元素。您可以将'map-canvas'设置为正文，然后在地图周围的区域中放置包含内容的div，但远离POI或地图控件工具，并使用RGBA颜色作为内容div的背景颜色（也许50％的不透明度），但由于顶部的div，因此访问者无法访问该内容。

这样的事情应该让你开始......：

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script type='text/javascript'>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(35.248669, -80.804619),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var markers = [];

markers[0] = new google.maps.Marker({
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00E64D|000000',
       position: new google.maps.LatLng(35.247334, -80.805382),
    map: map
});

markers[1] = new google.maps.Marker({
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000',
       position: new google.maps.LatLng(35.247551, -80.804008),
    map: map
});


for ( i = 0; i < markers.length; i++ ) {
    google.maps.event.addListener(markers[i], 'click', function() {
      window.location.href = this.url;  //changed from markers[i] to this[i]
    });
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
  <style type="text/css">
html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative; 
}
.content-wrapper {
    position: relative;
    width: 960px;
    margin: 0px auto;
}
#content1 {
    position: absolute;
    width: 250px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(0, 153, 153, 0.5);
    border: 2px solid #222;
    border-radius: 15px;
    top: 100px;
    left: 50%;
    margin-left: 100px;
    z-index: 999;
}
#content2 {
    position: absolute;
    width: 250px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(153, 110, 0, 0.41);
    border: 2px solid #222;
    border-radius: 15px;
    top: 400px;
    left: 50%;
    margin-left: -350px;
    z-index: 999;
}
  </style>
  </head>
  <body>
  <div class="wrapper">
    <div id="map-canvas" style="width: 100%; height: 100%; margin: 0px auto; position: relative; z-index: -1;">
    </div>
    <div id="content1">blah blah</div>
    <div id="content2">Fuu</div>

    </div>
  </body>
</html>

因此，要获得两列，您需要将＃content1和＃content2的高度设为100％。问题是您的地图控件位于侧面，因此您必须调整此位置。查看Google Maps API，了解您是否可以更改控件的位置。也许将两列放在右边，然后关闭卫星/地图视图的控件并设置所需效果的默认值。

我可以看到45度视角和大城市的初始变焦为5左右会有多酷。

编辑以解释绝对定位：

传统上，一个网页会有一个包含div，通常是.wrapper或.container，而你的所有元素都会在其中。事实上，这个例子只有一个容器，.wrapper。但是，如果我们尝试为覆盖地图的内容实现包装器，即使它是透明的，它也会覆盖所有地图元素并阻止用户具有地图的功能。所以我们需要使用绝对定位。绝对定位相对于最接近的包含元素的位置为“绝对”，位置为“relative”，在本例中为.wrapper。

因为绝对定位会根据用户的屏幕分辨率放置您的元素（＃content1，＃content2），如果您使用严格的放置定义（如像素），结果将会不一致，即：

#content2 {
    position: absolute;
    width: 250px;
    height: 150px;
    top: 100px;
    left: 100px;
    z-index: 999;
}

无论您的屏幕分辨率如何，上面的代码都会将元素#content2从左侧移动100个像素。实际上，这可能是左侧边栏的正确方法，并且会清除Google地图导航工具，以便用户可以缩放地图。

但是，无论屏幕分辨率如何，您可能希望将内容元素置于居中位置。为了达到这个目的，你要设置左：50％;然后用边距调整。设置为左：50％将元素最左侧的部分置于屏幕中间，无论分辨率如何。由于元素的宽度为250px，因此设置margin-left：-125px;将元素移回到其总宽度的50％左侧，从而使元素居中。如果宽度为300px，则设置margin-left：-150px，依此类推以进行居中。根据你的绘图，我猜你会希望你的内容区域大约为650px，而不是居中，所以对于内容div你可以使用这个代码：

#content1 {
    position: absolute;
    width: 650px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(0, 153, 153, 0.5);
    border: 2px solid #222;
    border-radius: 15px;
    top: 100px;
    left: 50%;
    margin-left: 180px;
    z-index: 999;
}

我将大多数页面设计为最小宽度为960像素，以覆盖iPad。如果我想确保#content1适合视野，我必须计算960像素的屏幕宽度，并将其除以2（480px），因为我们的元素的左边缘居中。由于元素是650像素，它将向右延伸太远（170像素）。因此，要将我的内容div＃content1放在宽屏显示器（1920像素）的页面中间附近，并且在较小的显示器（如iPad）上仍然完全可见，我必须设置margin-left： - 180像素。当在iPad上观看时，这将在元素的右侧提供舒适的10px边距。

另一个重要的说明;我使用了盒子大小：border-box;属性。此属性确保我为宽度（此处为650px）指定的任何名称将是总元素宽度，包括填充和边框。不使用border-box，我的＃content1 div宽度为684px。（宽度：650px，填充10px左，10px右，边框2px左，2px右）。使用box-sizing：border-box使我的数学更简单。

如果您发现我的回答有用，请选择正确的答案，将您的问题标记为已回答。

谷歌地图作为背景与居中的列

1 个答案: