vue-baidu-map 初始化获取当前位置

### 使用 `vue-baidu-map` 初始化并获取用户当前位置 为了在使用 `vue-baidu-map` 组件库时能够成功初始化地图并且获取用户的当前地理位置，可以按照如下方法操作： #### 安装依赖包 确保已经安装了必要的依赖包。如果尚未完成这一步骤，则可以通过 npm 或者 yarn 来安装。 ```bash npm install vue-baidu-map --save ``` 或者 ```bash yarn add vue-baidu-map ``` #### 配置项目 对于 Vue CLI 创建的应用程序，在根目录下的 `vue.config.js` 文件中添加特定配置来支持 IE 浏览器[^3]。 ```javascript module.exports = { transpileDependencies: ['vue-baidu-map'], }; ``` #### 编写组件代码 下面展示的是一个简单的 Vue 单文件组件实例，展示了如何创建百度地图实例以及请求浏览器访问设备的位置服务从而获得经纬度坐标信息。 ```html <template> <baidu-map class="map" @ready="handler"> <!-- 地图其他选项 --> </baidu-map> </template> <script> export default { methods: { handler({BMap, map}) { // 判断是否支持地理定位 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position){ const point = new BMap.Point(position.coords.longitude, position.coords.latitude); map.centerAndZoom(point, 15); // 设置中心点和缩放级别 alert(`纬度:${position.coords.latitude},经度:${position.coords.longitude}`); }, function(){ handleNoGeolocation(true); } ); } else { // 浏览器不支持 Geolocation handleNoGeolocation(false); } function handleNoGeolocation(errorFlag) { if (errorFlag) { alert('定位失败'); } else { alert('您的浏览器不支持地理定位'); } map.centerAndZoom("北京", 10); // 默认城市 } } } } </script> <style scoped> .map{ width: 100%; height: 500px; } </style> ``` 这段代码实现了当页面加载完毕后自动尝试调用浏览器 API 获取用户的实时位置，并将该位置设置为地图视窗的中心点；同时也处理了一些可能遇到的情况比如用户拒绝共享位置或是浏览器本身不具备此类能力等问题。