vue3如何使用百度地图

Vue3可以使用百度地图API来实现地图相关的功能。以下是使用百度地图API的步骤：

在百度地图开放平台上注册账号，并创建应用。
在Vue项目中，安装百度地图API的SDK，可以使用如下命令进行安装：

npm install baidu-map-sdk --save

在Vue组件中引入百度地图的JS文件，可以使用如下代码：

import BMap from 'baidu-map-sdk';

在Vue组件中创建地图容器，并初始化地图，可以使用如下代码：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    const map = new BMap.Map("map"); // 创建地图实例
    const point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别
  }
}
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

在地图中添加标注点，可以使用如下代码：

const marker = new BMap.Marker(point); // 创建标注点
map.addOverlay(marker); // 将标注点添加到地图中

在地图中添加信息窗口，可以使用如下代码：

const infoWindow = new BMap.InfoWindow("信息窗口内容"); // 创建信息窗口
marker.addEventListener("click", function(){
  map.openInfoWindow(infoWindow, point); // 在标注点上打开信息窗口
});

在地图中添加自定义覆盖物，可以使用如下代码：

const MyOverlay = function(point){
  this._point = point;
}
MyOverlay.prototype = new BMap.Overlay();
MyOverlay.prototype.initialize = function(map){
  this._map = map;
  const div = document.createElement("div");
  div.style.position = "absolute";
  div.style.width = "20px";
  div.style.height = "20px";
  div.style.backgroundColor = "red";
  div.style.borderRadius = "50%";
  map.getPanes().labelPane.appendChild(div);
  this._div = div;
  return div;
}
MyOverlay.prototype.draw = function(){
  const pixel = this._map.pointToOverlayPixel(this._point);
  this._div.style.left = pixel.x - 10 + "px";
  this._div.style.top = pixel.y - 10 + "px";
}
const myOverlay = new MyOverlay(point);
map.addOverlay(myOverlay);

以上就是使用百度地图API实现地图相关功能的步骤。