0

我正在尝试做与这个问题相关的事情，即以谷歌地图作为背景填充整个页面，然后在其顶部添加一些内容。但不同之处在于，我对此内容有两列布局，并且我希望它具有响应性，所以我很难将其居中。

问题是地图需要具有功能性，所以我想为它留出尽可能多的空间。我知道两列下方的地图将不起作用，但我希望其余的都起作用。

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

那么我该怎么做才能使两列居中呢？如有必要，我对一些 JS 持开放态度，尽管我是新手。

编辑：我制作了一个超级草图来帮助可视化......在它上面你可以看到如果我使用包装器（透明紫色层）并将它居中（就像我在其余页面上所做的那样） ，它覆盖了标记所在的地图中心部分。

4

1 回答 1

0

我不明白你怎么能有一个功能齐全的地图，上面有内容。为了使内容可见，它必须具有更高的 z-index，这反过来会掩盖地图中的元素。您可以将“地图画布”设置为主体，然后将带有内容的 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。但是，如果我们尝试为覆盖地图的内容实现包装器，即使它是透明的，它也会覆盖所有地图元素并阻止用户使用地图的功能。所以我们需要使用绝对定位。绝对定位是相对于最近的包含“相对”位置的元素的“绝对”定位，在这种情况下是 .wrapper。

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

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

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

但是，您可能希望内容元素居中，而不管屏幕分辨率如何。为了实现这一点，您将设置 left:50%; 然后调整边距。设置 left:50% 将元素的最左侧部分置于屏幕中间，与分辨率无关。由于元素的宽度为 250px，设置 margin-left: -125px; 会将元素移回其总宽度的左侧 50%，从而使元素居中。如果你的宽度是 300 像素，你可以设置 margin-left: -150 像素，以此类推来居中。根据您的绘图，我猜您希望您的内容区域大约为 650 像素，并且更多地位于右侧而不是居中，因此对于内容 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 上查看时，这将在元素的右侧提供 10 像素的舒适边距。

另一个重要的注意事项；我使用了 box-sizing: border-box; 财产。此属性确保我为宽度（此处为 650 像素）指定的任何名称都是元素的总宽度，包括填充和边框。如果不使用边框框，我的#content1 div 将是 684px 宽。（宽度：650 像素，内边距 10 像素左和 10 像素右，边框左 2 像素和右 2 像素）。使用 box-sizing:border-box 让我的数学更简单。

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

于 2013-10-01T18:12:11.110 回答