前言
目前有很多地图都支持开发者模式,例如百度地图,高德地图等。学习地图主要的原因是想与Echarts进行联动,最终实现一个低代码来取悦自己。最近我学习了百度地图,就准备写一篇文章记录下学习的过程,共勉(本人并非地理专业毕业,对经纬度,图层等地图专业知识的认知只停留在表面,如小伙伴们看到有关这方面的文章,可以评论推荐一下~)。
准备阶段
所有的开发都基于百度地图提供的API,所以如何把百度地图引入到项目中,是关键。这里我搬运一个百度地图官方提供的文档(如下链接)。
官方文档对于从零到有做了很详细的说明。注册百度账号,申请成为百度开发者,我就不再单独阐述了。但对于
AK秘钥申请中Referer白名单
,如果只是写demo,直接填入*即可(其它的勾选项按照官网的来就行)。
小结:准备阶段主要就是申请账号,成为开发者,最后申请秘钥。接下来要用刚刚申请的秘钥把百度地图加载到页面中显示。
引入地图
这部分内容对应官方文档的
Hello World
,如果你是通过脚手架创建的vue项目,在根目录index.html文件内,body标签下应该有一个id为app的块级元素div(这也是vue挂载的根节点)。然后我们另起一行,正式地引入百度地图。<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=填写刚刚申请的秘钥"></script>
到这一步,就算是把百度地图API文件引入到自己的项目中了,接下来就是调用API在页面中展示地图。
展示地图
首先,在模板(template)中创建一个块级元素
<div id="container" />
容器。
接下来就是用JS代码展示地图
<script setup>
import { nextTick, onMounted, ref } from "vue";
/**
* 1.setup在created钩子之前就已执行,这个时候DOM还没有加载,还拿不到id
* 2.onMounted钩子调用的时候DOM已经加载完成,这时候可以拿到id初始化百度地图
* 3.nextTick:将回调推迟到下一次DOM更新时立即调用
*/
onMounted({
nextTick(() => {
init();
});
});
const map = ref(); // map:存放展示在地图上的东西(覆盖物, 点线面, 标注等)
// 初始化百度地图信息
const init = () => {
map.value = new BMapGL.Map('container'); // 是不是很像vue挂载的样子
map.value.centerAndZoom('北京市', 10); // 设置中心点位置和缩放等级
map.value.enableScrollWheelZoom(true); // 允许滚轮缩放
}
</script>
到这一步,其实已经算是大功告成了。但还需要注意一点,记得给DOM设置宽高,不然地图的高度会为0,导致无法显示出来
。
<style>
.container {
width: 500px;
height: 500px;
border-radius: 20px;
}
</style>
共同学习
如果小伙伴们在地图显示这步,
看完以上的文章后,仍然无法显示的,请记得留言告诉我
。我将竭尽所能提供帮助并修改文章内容,通过费曼学习法,让更多人能上手操作成功(原生html也可以达到上面的效果,不一定都要使用vue)。
点线面标注Demo
首先,我们约定俗成一些命名:点
point
,标注marker
,线polyline
,面polygon
,圆circle
等。当然你也可以自己命名,这里主要是为了见名知意。这些命名统称为覆盖物,也就是说覆盖物包含点线面,标注等。
下面直接上代码(我以添加标注点,标注点信息窗口,以及覆盖物点击事件写成一个例子)。
<!-- vue3不需要根节点唯一 -->
<template>
<div id="container" class="container" />
<!-- 我是用的element组件库, 这里你可以使用原生button代替 -->
<el-button @click="getMarker(false)">getMarker</el-button>
<el-button @click="addMapClickEvent">添加地图点击事件</el-button>
<el-button @click="removeMapClickEvent">注销地图点击事件</el-button>
</template>
<script setup>
// 刚才初始化的代码就不重复写入...
// 1. 由于经纬度自己手写比较麻烦,我选择使用API提供的中心点位作为默认经纬度
const getCenterPoint = () => {
return map.value.getCenter(); // 获取中心点位
};
// 2. 用获取的中心点位创建标注
const getMarker = (e) => {
const { lng, lat } = e ? e.latlng : getCenterPoint(); // e.latlng对应4的事件默认传参
const point = new BMapGL.Point(lng, lat); // 获取点
const marker = new BMapGL.Marker(point, { // 获取默认图标的标注点
enableDragging: true, // 允许拖拽该标注点
});
// 3. 为标注点添加一个单击事件
marker.addEventListener('click', (event) => {
// event: 感兴趣的小伙伴可以打印看看这个,在这并没有使用只是罗列下
const info = {
// 这里是一些配置项
width: 50,
height: 80,
title: '标题名称',
};
const infoWindow = new BMapGL.InfoWindow('内容区域', info); // 已经包装成一个弹窗
map.value.openInfoWindow(infoWindow, point); // 在地图指定点位显示弹窗
});
map.value.addOverlay(marker); // 根据中心点位绘制标注点(map.这样使用是为了展示到地图上)
};
// 4. 添加地图单击事件
const addMapClickEvent = () => {
map.value.addEventListener('click', getMarker);
};
// 5. 注销地图单击事件
const removeMapClickEvent = () => {
map.value.removeEventListener('click', getMarker);
};
</script>
上面的代码我注释得已经很多了,但我觉得还是有必要再次阐述下这三个按钮的目的:
getMarker
:这个按钮是根据地图中心点自动绘制一个标注点,每次移动地图后标注点总是出现在地图中心。但很多时候我们并不想这样,我们想手动能去标记点位。- 于是出现了下面两个按钮:
添加地图点击事件
和注销地图点击事件
。我们在单击地图的时候就可以绘制该点的标注。
这个例子讲的东西有点多,包括由点创建标注点,再给标注点创建单击事件。该单击事件是在该点位显示一个弹窗。最后讲这个标注点显示到地图上。
看到这想必大家对map有点想法了!只要想让一个东西在地图上显示,必调map
。想要获取点线面等,调用对应API即可。
自我批评
欢乐的学习时光总是那么短暂,以上只是百度地图的冰山一角。我会在之后学习中把好玩的内容继续和小伙伴们分享,共勉。今天介绍的大部分内容都是比较实用的,
很抱歉因为时间原因只举了标注点这一个Demo
。感兴趣的小伙伴可以去我的仓库 gitee.com/machenxi00/… 看看(写的不足的地方,请多多包涵)。还有图层等很多地图的概念,我会在后续的学习中进行补充。
展望未来
该项目会从0到1开始从环境搭建,到百度地图,Echarts。再到封装组件,最后结合Brace前端编辑器做出一个简单的低代码来愉悦我自己,感兴趣的小伙伴可以关注下。
下期预言
- 图层概念
- 第一期预言的GitHub提交规范(已写完)
- 其他好玩有趣的内容