【老板小剧场】04-边做边学，页面内插入地图_bootstrap网页中怎么插入地图-优快云博客

本文链接：https://blog.youkuaiyun.com/hryjzsh/article/details/110071070

本文记录了一次在网页中插入地图的过程，包括注册获取API key，设置div，定义高度以及添加JavaScript代码来展示地图和标记。通过遵循官方说明和前人的经验，实现了地图的页面内嵌入，未来计划探索更多地图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作日志： 2020-11-24，天气阴。

老板：小二，嗯……
小二：嗯？
老板：小二，快年底了，给你放个假，好好休息。
小二：老板，年初的时候一直在放假啊……（内心OS：年初的时候就没发工资，现在是不是又没钱了？）。
老板：好好休息，好好休息。

今天尝试在网页中加载一个地图。照例，还是先在优快云上寻找类似内容的博客，运气挺好，找到这一篇。

按图索骥，依据前人的经验，注册了用户，生成了应用，拿到了key。

最后根据官方说明导在页面中嵌入了如下的地图：
在这里插入图片描述

大概是真么几步操作：
1、在body中，添加一个div，用来显示嵌入的地图，给他起个名字，比如我这就叫“GaodeMap”：

<body>
    <div class="container">
        <h1> 显示一个地图 </h1>
        <div class="row">
            <div class="col-md-8  col-sm-12 shadow p-0 ">
                <div id="GaodeMap"></div>
            </div>
        </div>
    </div>
    <script src="{{url_for('static',filename='js/jquery-3.5.1.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/popper.min.js')}}"></script>
    <script src="{{url_for('static',filename='bootstrap4_local/js/bootstrap.min.js')}}"></script>
</body>

这里我将GaodeMap这个div放在了Bootstrap预定义的container容器里面，顺便给他加上了阴影样式（shadow），div四周填充设置为0（p-0）。利用Bootstrap设置样式，确实能省一些事。

2、在head中，定义一下这个地图div的高度，给了它400个像素：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加速的时光-老板小剧场</title>
    <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='bootstrap4_local/css/bootstrap.min.css')}}">
	    
    <style>
    #GaodeMap {
        height: 400px;
    }
    </style>
</head>

3、在body底部，添加相应的javascript代码：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=这里填写申请到的key"></script>
<script type="text/javascript">
var map = new AMap.Map('GaodeMap', {
    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
    zoom: 10, //8~30km的范围
    center: [108.942196, 34.232772] //省体运动场坐标
});
var marker = new AMap.Marker({
    position: new AMap.LngLat(108.942196, 34.232772),
});
map.add(marker);
marker.setTitle('陕西·西安');
marker.setLabel({    
    offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
    content: " <h5>圣·朱雀</h5>", //设置文本标注内容
    direction: 'bottom' //设置文本标注方位
});
</script>