Using Baidu map in vue3

1. Register a Baidu Map account and become a developer

1. Open Baidu Map Open Platform and click JavaScript API in the open document.

Insert image description here
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]
Insert image description here
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.
Insert image description here

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
Insert image description here

<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
Insert image description here