工作日志: 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。
以上三步,基本上就是重复了官方说明里的步骤,也是大多数人博客里的内容。不过官方说明里还有好多其他功能没有尝试,希望以后进一步探索。
冬天,不适合工作。