从0到1聊聊百度地图开发

98 阅读4分钟

前言

目前有很多地图都支持开发者模式,例如百度地图,高德地图等。学习地图主要的原因是想与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>

上面的代码我注释得已经很多了,但我觉得还是有必要再次阐述下这三个按钮的目的:

  1. getMarker:这个按钮是根据地图中心点自动绘制一个标注点,每次移动地图后标注点总是出现在地图中心。但很多时候我们并不想这样,我们想手动能去标记点位。
  2. 于是出现了下面两个按钮:添加地图点击事件注销地图点击事件。我们在单击地图的时候就可以绘制该点的标注。

这个例子讲的东西有点多,包括由点创建标注点,再给标注点创建单击事件。该单击事件是在该点位显示一个弹窗。最后讲这个标注点显示到地图上。
看到这想必大家对map有点想法了!只要想让一个东西在地图上显示,必调map。想要获取点线面等,调用对应API即可。

自我批评

欢乐的学习时光总是那么短暂,以上只是百度地图的冰山一角。我会在之后学习中把好玩的内容继续和小伙伴们分享,共勉。今天介绍的大部分内容都是比较实用的,很抱歉因为时间原因只举了标注点这一个Demo。感兴趣的小伙伴可以去我的仓库 gitee.com/machenxi00/… 看看(写的不足的地方,请多多包涵)。还有图层等很多地图的概念,我会在后续的学习中进行补充。

展望未来

该项目会从0到1开始从环境搭建,到百度地图,Echarts。再到封装组件,最后结合Brace前端编辑器做出一个简单的低代码来愉悦我自己,感兴趣的小伙伴可以关注下。

下期预言

  1. 图层概念
  2. 第一期预言的GitHub提交规范(已写完)
  3. 其他好玩有趣的内容