1、写在前面
Hello！这篇笔记将会介绍如何在Vue3.0框架中导入地图，通过vue-echarts展现。
2、基本步骤
- vue-cli创建Vue3.0项目
- 安装echarts & vue-echarts插件
- 获取ak
- 对接地图（引入地图的扩展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插件，在项目入口文件中进行全局导入。
js
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。
js
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和连接
代码：
js
<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图表（例如地图 + 散点图展示各地市某产品销量大盘等需求）进行更复杂的定制化开发。
此章作为基础篇，如有任何问题随时分享，一起共同进步。