vue3+ts使用百度地图实现 点击获取位置与经纬度

在Vue3中结合TypeScript使用百度地图API实现点击获取用户位置与经纬度，你可以按照以下步骤操作：

1. 首先，在项目中安装`@types/bmap`库，用于提供对百度地图API的TypeScript支持：

   npm install @types/bmap

2. 引入百度地图的核心文件，并在Vue组件中导入它：

   import BMap from 'bmap';

3. 创建`BMap.Map`实例并在模板中绑定到元素：

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

4. 使用`useRef`在TS中管理地图实例：

   import { Ref } from "vue";
   const mapRef = ref<BMap.Map>();

5. 初始化地图并设置中心点：

   async mounted() {
     if (!mapRef.value) return;
     const map = new BMap.Map('map');
     // 设置中心点，可以根据实际需求调整
     map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
   }

6. 实现鼠标点击事件监听，通过`event`对象获取经纬度：

   mapRef.value.addEventListener('click', (event) => {
     console.log(`经度: ${event.point.lng}, 纬度: ${event.point.lat}`);
   });

7. 这里`event.point.lng`和`event.point.lat`就是点击位置的经纬度。

注意：在生产环境中，建议将百度地图API的关键字替换为你的应用key，并处理好异步加载和错误处理。