使用步骤
1.注册百度账号，申请成为百度开发者，获取服务密钥（ak）、使用相关服务；
2.vue项目映入key，配置百度地图API；
3.使用相关服务
示例
1.注册账号、申请服务密钥
注册账号、申请服务密钥跟着官网教程即可，我这边使用的是JavaScript API v3.0版本，官网链接地址如下：
https://lbsyun.baidu.com/index.php?title=jspopular3.0
2.vue项目引入key
我这边用的是vue3.x版本，版本不同有部分偏差的话可以看官方文档，主要是vue.config.js文件中需要配置一下。
首先，在public/index.html文件中输入申请的key：
关键代码：
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=输入申请的密钥key"></script>
index.html文件具体代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=输入申请的密钥key"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
其次，在vue.conifg.js文件中配置BMap：
关键代码：
configureWebpack: {
externals: {
BMap: 'BMap'
}
}
vue.config.js文件完整代码（由于是示例，所以其他的配置一律没写，只有关键配置）：
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
externals: {
BMap: 'BMap'
}
}
})
最后，在vue文件中通过import引入BMap，如下所示：
（注意：如果不在vue.config.js配置BMap的话直接import是无法使用的）
<template>
<div id="mapContainer" style="height: 600px;width: 100%"></div>
</template>
<script>
import {
onMounted, ref } from 'vue';
import BMap from 'BMap'
export default {
name: 'BaiduMap',
setup() {
let map = null;
const initMap = () => {
// 创建地图实例
map = new BMap.Map('mapContainer');
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
}
onMounted(() => {
initMap();
});
},
};
</script>
这样最简单的地图渲染就出来，这边用的是vue3的语法，如果是vue2的话请自行转换一下。效果如下：
3.使用相关服务
使用相关服务可以查看我百度地图API专栏中的笔记，查看是否有帮助。