Vue3实现百度地图可视化

1、写在前面

Hello！这篇笔记将会介绍如何在Vue3.0框架中导入地图，通过vue-echarts展现。

2、基本步骤

1. vue-cli创建Vue3.0项目
2. 安装echarts & vue-echarts插件
3. 获取ak
4. 对接地图（引入地图的扩展bmap，bmap中添加属性）

好啦，了解了基本步骤后，我们就开始吧！上车了，出发！

3、安装echarts & vue-echarts插件

1、安装echarts和vue-echarts插件：npm install echarts vue-echarts

1.1：Q：为什么要使用vue-echarts插件？

A: 使用vue-echarts插件后，不用像echarts绘制图表时要document.getElementById()获取画布的DOM元素和调用init()方法初始化，插件封装后在一定程度上进行了简化。

2、main.js中引入 & 注册 echarts 和 vue-echarts插件，在项目入口文件中进行全局导入。

import { createApp } from 'vue'
import App from './App.vue'
// 引入 echarts
import * as echarts from 'echarts'
import VueECharts from 'vue-echarts'

const app = createApp(App);
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.component('v-chart', VueECharts);
app.mount('#app');

4、获取ak

在后面的一个步骤中，我们要在项目中对接百度api的接口，这个api接口的参数部分包含了一个叫ak的参数，我们要首先获取到这个ak值才能对接上百度的接口。

1、访问地址：lbsyun.baidu.com/

2、顶部tab栏点击【控制台】，点击后需要进行注册，注册完成后登录。

3、应用管理 --> 我的应用 --> 创建应用 --> 应用类型选择浏览器端。

4、应用创建成功后，会生成一个ak编码，这个ak码我们将会使用到。

5、项目对接地图

1、配置地图api接口，public/index.html ，url两个参数，参数v最好写3.0，参数ak就是我们创建应用生成的ak。

https://api.map.baidu.com/api?v=3.0&ak=[akvalue]

2、引入地图的扩展，引入后才可以在echarts中使用bmap属性对地图样式进行扩展

import 'echarts/extension/bmap/bmap';

3、配置bmap：bmap我配置了3个地图属性center 、zoom 、roam

4、style中的优化：定制画布大小 & 去掉左下角地图logo和连接

代码：

<template>
  <v-chart :option="options"></v-chart>
</template>

<script>
import { reactive } from "vue";
// 引入地图的扩展
import "echarts/extension/bmap/bmap";
export default {
  name: "App",
  setup() {
    const options = reactive({
      bmap: {
        // 地图中心点（经纬度）
        center: [104, 38],
        // 缩放比例
        zoom: 5,
        // 是否允许缩放
        roam: false,
      },
    });
    return { options };
  },
};
</script>

<style lang="scss">
.ec-extension-bmap {
  margin: 20px;
  width: 840px !important;
  height: 680px !important;
}
.anchorBL {
  display: none;
}
</style>

6、写在最后

OK！到这里，相信地图就绘制完成拉！图表每每成功展示在项目中后，都会有一丢丢的小激动，bmap还有更多的属性（mapStyle...）等待探索。

后面还可以基于该地图进一步的定制渲染或集成ECharts图表（例如地图 + 散点图展示各地市某产品销量大盘等需求）进行更复杂的定制化开发。

此章作为基础篇，如有任何问题随时分享，一起共同进步。