Vue3 中使用百度地图 API 获取当前地理位置

要在 Vue3 中使用百度地图 API 获取当前地理位置，你可以按照以下步骤进行操作：

在你的 Vue 项目中安装百度地图 API 的 JavaScript SDK。

npm install @types/baidumap-web-sdk --save

在你的组件中引入百度地图的 JavaScript SDK。

import BMap from 'baidumap-web-sdk';

在你的组件中创建一个地图实例，并通过getCurrentPosition方法获取当前地理位置。

export default {
  mounted() {
    const map = new BMap.Map('mapContainer');
    
    const geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        const {lng, lat} = r.point;
        console.log('当前位置经度：' + lng);
        console.log('当前位置纬度：' + lat);
      }
      else {
        console.log('failed'+this.getStatus());
      }        
    },{enableHighAccuracy: true});
  }
}

在你的组件模板中添加一个用于显示地图的容器。

<template>
  <div id='mapContainer'></div>
</template>

这样，你就可以在 Vue3 中使用百度地图 API 获取当前地理位置了。请确保在使用百度地图 API 之前，你已经申请到了有效的 API 密钥，并将其配置在适当的地方。