一，下载依赖

vue-baidu-map-3x

二，main.js引入

// 百度地图
import BaiduMap from 'vue-baidu-map-3x';

app.use(BaiduMap, {
    ak: "XXXXXXXX"
});

三，使用

<div class="map">
       <baidu-map :center="center" :zoom="zoom" @ready="handler">
          <!-- bm-marker 就是标注点 定位在point的经纬度上 -->
           <bm-marker
            :position="center"
            :dragging="false"
            animation="BMAP_ANIMATION_BOUNCE"
          >
            <!-- bm-label 显示标注点名称  -->
            <bm-label
             :content="addressName"
             :offset="{ width: -35, height: 30 }"
             />
            </bm-marker>
     </baidu-map>
</div>

<script setup>
const center = ref({
  lng: 116.404,
  lat: 39.915,
});
const zoom = ref(5);
//接口赋值
const addressName = ref("");

function handler({ BMap, map }) {
  console.log(1111);
  center.lng = data.lng;
  center.lat = data.lat;
  zoom.value = 15;
  addressName.value = data.name;
}
</script>

四，效果

五，更多组件和api请查看文档

https://map.heifahaizei.com/