Steps for usage
1. Register a Baidu account, apply to become a Baidu developer, obtain a service key (ak), and use related services;
2. Map the vue project into the key and configure the Baidu map API ;
3. Use related services
Example
1. Register an account and apply for a service key
To register an account and apply for a service key, just follow the official website tutorial. What I use here isJavaScript API v3.0Version, the official website link address is as follows:
https://lbsyun.baidu.com/index.php?title=jspopular3.0
2.vue project introduction key
I am using the vue3.x version. If there are some deviations between different versions, you can refer to the official documents, mainly the vue.config.js file. Need to configure it.
First, enter the application key in the public/index.html file:
Key code:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=输入申请的密钥key"></script>
Index.html file specific code:
<!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>
The next, presentvue.conifg.jsplacement in sentence subjectBMap：
关键代码：
configureWebpack: {
externals: {
BMap: 'BMap'
}
}
vue.config.jsThe complete code of the file (since it is an example, other configurations are not written, only key configurations):
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
externals: {
BMap: 'BMap'
}
}
})
Finally, introduce in the vue file through import, as shown below: BMap
( Note: If BMap is not configuredvue.config.js, it will not be available directlyimport)
<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>
This is the simplest map rendering. The syntax of vue3 is used here. If it is vue2, please convert it yourself. The effect is as follows:
3. Use related services
Use related services to view meBaidu Map APINotes in the column, see if it helps.