VUE3 + 百度地图 实现1.定位 2.点击点展示信息

Vue3 和百度地图结合可以方便地实现实时定位和点击事件下的信息展示。以下是简单的步骤和原理：

1. **定位（Geolocation）**:
- 首先，在项目中引入 Vue3 和百度地图 JavaScript API。
- 使用 `@vue/cli-plugin-babel` 或者其他插件支持 ES6 模块导入。
- 在组件内通过 `this.$axios` 或者其他网络请求库获取用户的地理位置数据，如经纬度。

   import BMap from '@bmap/web';

   setup() {
     const geolocation = new BMap.Geolocation();
     geolocation.getCurrentPosition((res) => {
       // res.accuracy 返回精度，坐标在res.center中
       console.log(res);
       // 更新地图中心点到用户位置
       this.map.setCenter(res.center);
     }, (err) => {
       console.error('无法获取位置', err);
     });
   }

2. **点击点展示信息**:
- 创建一个虚拟地图标记（Marker）表示地图上的兴趣点，每个标记对应一个信息对象。
- 当用户点击标记时，绑定点击事件监听器，显示对应的数据显示组件（例如一个 Popover 或者模态框）。

   const markerOptions = {
     position: // 标记位置,
     draggable: false,
     click(e) {
       this.showInfoWindow(e); // 显示信息窗口
     },
   };

   methods: {
     showInfoWindow(e) {
       // e.point 获取鼠标点击的具体坐标
       const infoContent = `<div>${this.markers[e.point.lnglat].info}</div>`; // 假设markers是一个包含经纬度及对应信息的对象数组
       const infowindow = new BMap.InfoWindow(infoContent, { offset: new BMap.Size(0, -40) }); // 设置信息窗体样式
       infowindow.open(this.map, e.point);
     }
   }