Vue通过调⽤百度API获取地理位置-经度纬度省份城市⼀、⾸先在百度api注册获得ak密钥 ⼆、新建js⽂件，我命名为loadBMap.js，⾥⾯创建script，代码如下：
/**
数控剪床* 加载地图
* @param {Function} callback 回调函数名称，回调函数将会挂载到window上，例如：window.initBaiduMapScript，在⽅法中就能拿到BMap对象
*/
export function loadBMap(callback) {
var script = ateElement('script')
script.src = 'api.map.baidu/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')
}
/
/ 获取地理定位
getLocation() {
const _this = this
_location = new _this.BMap.Geolocation()
if (_location) {
// 开启SDK辅助定位，仅当使⽤环境为移动web混合开发，且开启了定位sdk辅助定位功能后⽣效
_ableSDKLocation()
// 开始定位
this.positioning = true
// 倒计时
this.positioningInterval = setInterval(() => {
if (untDown === 0) {
clearInterval(this.positioningInterval)
} else {
}
}, 1000)
// 位置选项
const positionOptions = {
enableHighAccuracy: true, // 要求浏览器获取最佳结果 timeout: 30, // 超时时间
maximumAge: 0 // 允许返回指定时间内的缓存结果。如果此值为0，则浏览器将⽴即获取新定位结果 }
// 获取⽤户位置信息
_CurrentPosition(position => {
_setPositioning()
// 获取定位结果状态码
const statusCode = _Status()
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.$({
key: NotificationKey,
message: '提⽰',
description: '您的浏览器不⽀持地理位置服务'
})
}
},
// 重置定位相关数据
resetPositioning() {
this.positioning = false
剖分轴承
this.location = null
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">
；还需等待
<span class="red">{{ countDown }}</span>秒
</span>
</a-form-model-item>
效果：
【获取前】
【获取中】
【获取后】
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议