Vue 通过调用百度API获取地理位置-经度纬度省份城市

一、首先在百度api注册获得ak密钥

 

 

 

二、新建js文件，我命名为loadBMap.js，里面创建script，代码如下：

/** * 加载地图 * @param {Function} callback 回调函数名称，回调函数将会挂载到window上，例如：window.initBaiduMapScript，在方法中就能拿到BMap对象 */ export function loadBMap(callback) { var script = document.createElement('script') script.src = 'http://api.map.baidu.com/api?v=2.0&ak=你的AK&callback=' + callback document.body.appendChild(script) }

 

三、在Vue页面中导入js

import { loadBMap } from './loadBMap'

 

四、在Vue页面中定义一些需要用到的数据

data () {
  return { BMap: null, geolocation: null, // Geolocation对象实例 positioning: false, // 定位中 positioningInterval: null, // 定位倒计时计时器 countDown: 30, // 倒计时，单位秒 location: null // 位置信息  } }

 

四、在mounted中调用创建回调函数，并调用loadMap方法，将回调函数名称传递到loadMap中

mounted() {
  const _this = this window.initBaiduMapScript = () => { _this.BMap = window.BMap } loadBMap('initBaiduMapScript') }

 

五、在methods中定义获取地理位置的方法

// 获取地理定位 getLocation() { const _this = this _this.geolocation = new _this.BMap.Geolocation() if (_this.geolocation) { // 开启SDK辅助定位，仅当使用环境为移动web混合开发，且开启了定位sdk辅助定位功能后生效  _this.geolocation.enableSDKLocation() // 开始定位 this.positioning = true // 倒计时 this.positioningInterval = setInterval(() => { if (this.countDown === 0) { this.countDown = 30 clearInterval(this.positioningInterval) } else { this.countDown-- } }, 1000) // 位置选项 const positionOptions = { enableHighAccuracy: true, // 要求浏览器获取最佳结果 timeout: 30, // 超时时间 maximumAge: 0 // 允许返回指定时间内的缓存结果。如果此值为0，则浏览器将立即获取新定位结果  } // 获取用户位置信息 _this.geolocation.getCurrentPosition(position => { _this.resetPositioning() // 获取定位结果状态码 const statusCode = _this.geolocation.getStatus() let msg = '由于未知错误而无法检索设备的位置' // 提示消息 let msgType = 'error' // 消息类型 // 判断结果状态码，为0代表获取成功，读取省市、经纬度 switch (statusCode) { case 0: msgType = 'success' msg = '获取地理位置定位请求成功' if (position) { // 数据变量定义 let lat = 0.0 // 经度 let lng = 0.0 // 纬度 let province = '未知' // 经度 let city = '未知' // 纬度 // 坐标 if (position.point) { lat = position.point.lat lng = position.point.lng } // 位置 if (position.address) { province = position.address.province city = position.address.city } _this.location = { 省份: province, 城市: city, 经度: lat, 纬度: lng } } else { msg = '由于未知错误而无法检索设备的位置' } break case 2: msg = '由于未知错误而无法检索设备的位置' break case 4: case 5: msg = '位置服务请求非法' break case 6: msg = '应用程序没有使用位置服务的权限' break case 7: msg = '网络不可用或者无法连接到获取位置信息的卫星' break case 8: msg = '无法在指定的最大超时间隔内检索位置信息' break default: msg = '由于未知错误而无法检索设备的位置' break } _this.$notification[msgType]({ key: NotificationKey, message: '提示', description: msg }) }, positionOptions) } else { _this.$notification.error({ key: NotificationKey, message: '提示', description: '您的浏览器不支持地理位置服务' }) } }, // 重置定位相关数据 resetPositioning() { this.positioning = false this.location = null this.countDown = 30 clearInterval(this.positioningInterval) }

 

六、在需要的地方调用getLocation即可，例如：

<a-form-model-item label="地理位置" prop="location"> <span>{{ location }}</span> <a v-show="!location && !positioning" @click="getLocation">点击获取位置</a> <a-spin :spinning="positioning" /> <span v-show="positioning"> &nbsp;还需等待 <span class="red">{{ countDown }}</span> 秒 </span> </a-form-model-item>

 

效果：

【获取前】

 

【获取中】

 

【获取后】