pc端使用百度地图获取位置（vue）

1.获取百度地图ak
2.新建js文件，将动态加载百度地图的api函数完成
3.在需要的页面或组件里面使用import导入方式使用
4.在mounted钩子函数中调用，将密钥传给js文件加载
5.new一个BMap,使用其方法
新建loadBMap的js文件

export default function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof window.BMap !== 'undefined') {
      resolve(window.BMap)
      return true
    }
    window.onBMapCallback = function() {
      resolve(window.BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

需要的页面导入这个方法

import loadBMap from '../../api/loadBMap.js'

在mounted中使用（注意异步，等待加载完成使用）

getLoad(){
	var that = this;
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(res){
		if(res) {
			console.log('获取地址')
			that.province = res.address.province
			that.myaddress = res.address.city
		}else {
			that.$message({
				message:'请检查您的浏览器是否禁用了获取位置',
				type:'warning'
			})
			console.log('默认地址')
			that.province = '省'
			that.myaddress = '市'
		}
	},{enableHighAccuracy: true}) //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false
},

在方法中使用

getLoad(){
	var that = this;
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(res){
		if(res) {
			console.log('获取地址')
			that.province = res.address.province
			that.myaddress = res.address.city
		}else {
			that.$message({
				message:'请检查您的浏览器是否禁用了获取位置',
				type:'warning'
			})
			console.log('默认地址')
			that.province = '省'
			that.myaddress = '市'
		}
	},{enableHighAccuracy: true}) //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false
},

打印结果

参考

https://www.cnblogs.com/Marco-hui/p/12155995.html