ZBLOG

你给的代码地图只有上半屏幕有能不能全屏

当然可以将地图全屏显示。你可以使用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>

通过设置 bodyhtml 的高度为100%,并将 #mapContainer 的高度也设置为100%,这样就能够让地图充满整个屏幕。记得将 你的API密钥 替换为你自己申请的高德地图Web API密钥。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=13487

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?