当然可以将地图全屏显示。你可以使用CSS样式来设置地图容器的高度为100%以撑满整个页面,使地图占据全屏空间。以下是修改后的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图示例</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#mapContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script>
<script type="text/javascript">
// 创建地图实例
var map = new AMap.Map('mapContainer', {
zoom: 10, // 缩放级别
center: [116.397428, 39.90923] // 中心点坐标,这里以北京为例
});
// 在地图上添加一个标记点
var marker = new AMap.Marker({
position: [116.397428, 39.90923], // 标记点坐标,这里以北京为例
map: map
});
</script>
</body>
</html>
通过设置 body 和 html 的高度为100%,并将 #mapContainer 的高度也设置为100%,这样就能够让地图充满整个屏幕。记得将 你的API密钥 替换为你自己申请的高德地图Web API密钥。
内容由零声教学AI助手提供,问题来源于学员提问




