1. Register a Baidu Map account and become a developer
1. Open Baidu Map Open Platform and click JavaScript API in the open document.
2. Register as a developer of Baidu Map Open Platform through Baidu account, select the developer type (individual/enterprise), and complete the developer certification.
2. Apply for key AK
The JavaScript API only supports browser-side AK for access and access. Developers should pay attention to selecting the correct AK type when applying for an AK. 1.
Enter the Baidu Map Open Platform official website console and click **[Application Management]-[My Application]
2. Click [Create Application] to enter the AK application page, fill in the application name, and be sure to select the AK type as "browser-side". The JS API only supports browser-side AK requests and access. 3. In order to prevent your AK from being stolen,
please You must configure a refer whitelist so that only websites in the whitelist can successfully initiate calls. As shown in the example below, *.mysite.com* is configured as a domain name whitelist, which means that only websites containing .mysite.com in the domain name can use this AK to access JS API services.
3. Using Baidu Map API in vue3.0
Note: I am using vue3 built by vite and using setup syntax sugar
1. First introduce it in index.html under the path
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
2. Use in components
<template>
<div class="homebox">
<div class="mapp" ref="baiduRef"></div>
<div class="content"></div>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, reactive, toRefs } from "vue";
const baiduRef = ref();
const map = ref();
const points = ref([
{ lng: 116.405725, lat: 39.935362 },
]);
const markers = ref([]);
function initMap() {
map.value = new BMap.Map(baiduRef.value); // 新建一个map地图实例
map.value.centerAndZoom(new BMap.Point(points.value[0].lng, points.value[0].lat), 10);
map.value.enableScrollWheelZoom(true); // 滚轮缩放
map.value.setMapStyleV2({
styleId: "1fb853a740649182c004c7f05e3f1ac7", // 样式id,设置样式的自定义
});
}
onMounted(() => {
initMap();
});
onUnmounted(() => {
map.value = null; // 销毁地图实例
});
</script>
<style scoped>
.homebox {
width: 100%;
height: 100%;
}
.mapp {
position: absolute;
width: 100%;
height: 100%;
top: 100px;
}
.content {
height: 100%;
display: flex;
}
</style>
3. Style display