vue3+vue-baidu-map-3x 实现浏览器定位

### 浏览器地理定位功能实现

为了在 Vue 3 和 `vue-baidu-map-3x` 中实现浏览器地理定位功能，可以按照如下方式构建应用。

#### 安装依赖库
确保安装了必要的包来支持项目开发：

npm install vue-baidu-map-3x --save

此命令用于引入百度地图插件至Vue 3环境中[^2]。

#### HTML结构配置
在HTML文件内需正确加载所需的脚本资源并设置好容器元素。对于使用CDN的方式，在页面头部加入相应链接；而通过模块打包工具，则无需额外操作因为已经由Webpack处理完毕[^1]。

#### 组件模板编写
创建包含百度地图组件的Vue单文件组件，并利用其内置子组件完成具体业务逻辑。以下是基于给定资料的一个简化版实例[^3]：

<template>
  <div id="app">
    <!-- 百度地图 -->
    <baidu-map class="map" ak="您的AK密钥" v="3.0" type="API" :zoom="15" :center="centerVal">
      <!-- 用户当前位置标记 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true"
        @locationSuccess="handleLocationSuccess" @locationError="handleLocationFailure"/>
      
      <!-- 可选：其他自定义控件或图层等 -->
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerVal: {lng: 0, lat: 0}, // 初始中心点坐标，默认设为(0,0)，实际应根据需求调整
    };
  },
  methods: {
    handleLocationSuccess(e){
      console.log('成功获取位置:', e);
      this.centerVal = { lng: e.point.lng, lat: e.point.lat }; // 更新地图视窗中心点
    },
    handleLocationFailure(){
      alert('无法获得地理位置');
    }
  }
};
</script>

<style scoped>
.map{
  height: 500px;
}
</style>

上述代码展示了如何集成百度地图以及监听用户的地理定位事件。当用户同意共享自己的位置信息时，将会触发`@locationSuccess`回调函数并将新得到的位置更新到地图显示区域中央。