从0到1聊聊百度地图开发从0到1聊聊，从引入API到页面中显示百度地图，到第一次绘制一个标注点，到覆盖物以及地图事件，到

前言

目前有很多地图都支持开发者模式，例如百度地图，高德地图等。学习地图主要的原因是想与Echarts进行联动，最终实现一个低代码来取悦自己。最近我学习了百度地图，就准备写一篇文章记录下学习的过程，共勉（本人并非地理专业毕业，对经纬度，图层等地图专业知识的认知只停留在表面，如小伙伴们看到有关这方面的文章，可以评论推荐一下~）。

准备阶段

所有的开发都基于百度地图提供的API，所以如何把百度地图引入到项目中，是关键。这里我搬运一个百度地图官方提供的文档（如下链接）。

lbs.baidu.com/index.php?t…

官方文档对于从零到有做了很详细的说明。注册百度账号，申请成为百度开发者，我就不再单独阐述了。但对于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提交规范（已写完）
- 从0到1聊聊Git提交
其他好玩有趣的内容