Question

我一直无法使用CSS将Google地图强制到某个位置。 3 column layout。我想要这样。当我在中心列中插入谷歌地图api链接时，它会偏移并破坏一切。我一直在试图找到一种方法来强制它在列中，但仍然无法正常工作。

我希望它是3列布局，中心列占大多数。然后是一个跨越整个宽度的页眉和页脚。

现在地图很小，但我希望它是中心列的整个大小。

html,
body {
    height: 100%;
	padding: 0;
	margin: 0;
}

body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}

header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
}

header h1 {
	font-size: 60px;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

div#div_map {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    display: inline-block;
}

#map {
    width: 25%;
    height: 25%;
    margin: 0 auto 0 auto;
    display: inline-block;
}

.container {
    position: relative;
    text-align: center;
}

.container div {
	height: 100%;
}

div.container, section.main {
    height: 100%;
}

.column-left {
	width: 25%;
	left: 0;
	background: #00F;
	position: absolute;
}
.column-center {
	width: 50%;
	background: #933;
	margin-left: 25%;
	position: absolute;
}
.column-right {
	width: 25%;
	right: 0;
	position: absolute;
	background: #999;
}

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="index.css" />
	<script>
		function initMap() {
			var latlng = {
				lat: 40.816714399999995,
				lng: -120.90523610000001
			};

			var map = new google.maps.Map(document.getElementById('map'), {
				zoom: 15,
				center: latlng
			});
			map.setOptions({
				streetViewControl: false
			});

			addMarker(latlng);

			// icon: 32x32
			function addMarker(latlng) {
				var marker = new google.maps.Marker({
					position: latlng,
					icon: 'http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/32/rss-feed-icon.png',
					map: map
				});
			}
		}
	</script>
	<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap">
	</script>
</head>

<body>
	<div class="container">
		<header></header>
		<section class="main">
            <div class="column-left" >Column left</div>
            <div class="column-center" >
                <div id="map" style="display:inline-block;"/>
            </div>
            <div class="column-right" >Column right</div>

			<!-- <h3 style="text-align: center;"></h3> -->

            <!-- <div id="map" /> -->
		</section>
		<footer></footer>
	</div>
</body>

</html>

Answer 1

喜欢这个？您忘记关闭div id="map"代码

了

我还将地图宽度/高度更改为100％/ 50％以及

.container div {...}

到

.main > div {...}

因为第一个选择器影响了某些谷歌地图的元素。

＆＃13;

html,
body {
    height: 100%;
	padding: 0;
	margin: 0;
}

body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}

header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
}

header h1 {
	font-size: 60px;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

div#div_map {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    display: inline-block;
}

#map {
    width: 100%;
    height: 50%;
    margin: 0 auto 0 auto;
    display: inline-block;
}

.container {
    position: relative;
    text-align: center;
}

.main > div {
	height: 100%;
}

div.container, section.main {
    height: 100%;
}

.column-left {
	width: 25%;
	left: 0;
	background: #00F;
	position: absolute;
}
.column-center {
	width: 50%;
	background: #933;
	margin-left: 25%;
	position: absolute;
}
.column-right {
	width: 25%;
	right: 0;
	position: absolute;
	background: #999;
}

＆＃13;

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="index.css" />
	<script>
		function initMap() {
			var latlng = {
				lat: 33.816714399999995,
				lng: -117.90523610000001
			};

			var map = new google.maps.Map(document.getElementById('map'), {
				zoom: 15,
				center: latlng
			});
			map.setOptions({
				streetViewControl: false
			});

			addMarker(latlng);

			// icon: 32x32
			function addMarker(latlng) {
				var marker = new google.maps.Marker({
					position: latlng,
					icon: 'http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/32/rss-feed-icon.png',
					map: map
				});
			}
		}
	</script>
	<script async src="https://maps.googleapis.com/maps/api/js?callback=initMap">
	</script>
</head>

<body>
	<div class="container">
		<header></header>
		<section class="main">
            <div class="column-left" >Column left</div>
            <div class="column-center" >
                <div id="map" style="display:inline-block;"> </div>
            </div>
            <div class="column-right" >Column right</div>

			<!-- <h3 style="text-align: center;"></h3> -->

            <!-- <div id="map" /> -->
		</section>
		<footer></footer>
	</div>
</body>

</html>

＆＃13;

如何强制Google地图保持锁定在中心列的范围内？

1 个答案: