我不明白你怎么能拥有一个功能齐全的地图，上面有内容。为了使内容可见，它必须具有更高的 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 让我的数学更简单。
如果您觉得我的回答有用，请选择我的回答为正确，将您的问题标记为已回答。