Vue 通过百度低头获取当前的位置信息、经纬度
时间: 2023-09-30 08:06:34 浏览: 538
Vue获取页面元素的相对位置的方法示例
Vue 可以通过百度地图 API 获取当前位置信息和经纬度。具体步骤如下:
1. 在百度地图开放平台注册账号并创建应用,获取 AK(Access Key)。
2. 在 Vue 项目中安装百度地图 JavaScript API 库,可以使用以下命令:
```
npm install bmap-gl --save
```
3. 在需要获取位置信息的组件中引入百度地图 API:
```javascript
import BMapGL from 'BMapGL';
```
4. 在组件的 `mounted` 钩子函数中创建地图实例,并调用 `getCurrentPosition` 方法获取当前位置信息:
```javascript
mounted() {
const BMap = window.BMapGL;
const map = new BMap.Map('container');
const geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
console.log('当前位置的经度为:' + r.point.lng);
console.log('当前位置的纬度为:' + r.point.lat);
}
else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
}
```
其中,`BMapGL` 是百度地图 JavaScript API 的主模块,`BMap.Map` 创建地图实例,`BMap.Geolocation` 创建定位实例,`getCurrentPosition` 方法用于获取当前位置信息。在获取成功后,将经度和纬度打印到控制台即可。
需要注意的是,百度地图 API 是收费的,每个应用有一定的免费调用次数限制。具体收费标准和调用次数限制可以参考百度地图开放平台的文档。
阅读全文