【老板小剧场】04-边做边学,页面内插入地图

本文记录了一次在网页中插入地图的过程,包括注册获取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>

其中地图的中心点坐标选择了圣·朱雀的坐标,同时在地图上设置了点标记Marker。

以上三步,基本上就是重复了官方说明里的步骤,也是大多数人博客里的内容。不过官方说明里还有好多其他功能没有尝试,希望以后进一步探索。


冬天,不适合工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值