这里是一个简单的问题。我正在学习 Web 开发，我想创建一个带有标题的边框，我想在它下面放一个谷歌地图 View 。这是我的 css 文件“mystyle.css”中的内容:
html{
height: 100%;
}
div.map{
height: 50%;
width: 50%;
}
div.title{
width: 100%;
height: 100%;
border: 5px solid blue;
margin: 0px;
text-align: center;
}
#map-canvas {
height: 50%;
width: 50%;
}
然后在我的 index.html 上，这是我拥有的:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps Hello World</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?MY_MAP_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="title"><h1>Google Maps Test</h1></div>
<div id="map-canvas"/>
</body>
我的问题是，我只能看到带有文本“Google Maps Test”的蓝色边框，我看不到 map View 。奇怪的是，如果我将 div.title 重命名为 body，那么我就可以看到 map 了。知道我做错了什么吗？
最佳答案
尝试使用
#map-canvas {
height:300px;
width:300px;
}
代替
#map-canvas {
height: 50%;
width: 50%;
}
并使用 <div id="map-canvas"></div>
代替
<div id="map-canvas"/>
关于HTML 和谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20511546/