1、利用HTML5 地理定位 获取当前位置经纬度
navigator.geolocation.getCurrentPosition(success,error)
- getCurrentPosition() 方法的第一个参数用于处理成功返回的数据。它规定当获取用户位置成功时运行的函数;
- getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
2、利用百度地图中的api将经纬度转换成地址名称 - 引入百度地图
- 使用HTML5获取到当前位置经纬度
- 调用百度地图api 传入经纬度数据 获取到当前位置名称(省市区)
1、在根目录下写好了一个map的js文件
map.js文件:
export default {
init: function() {
//ak密钥,百度地图官网申请
const AK = 'xxxxxxxxxxxxxx'
const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
return new Promise((resolve, reject) => {
// 百度地图异步加载回调处理
window.onBMapCallback = function() {
resolve(BMap)
}
// 插入script脚本
const scriptNode = document.createElement('script')
scriptNode.setAttribute('type', 'text/javascript')
scriptNode.setAttribute('src', BMapURL)
document.body.appendChild(scriptNode)
})
}
}
2、引入BMap
//这里是在vue项目中引入的
import BMap from '@/map.js'
3、使用
getAddress() {
// 检测是否支持地理定位
if (navigator.geolocation) {
const that = this
navigator.geolocation.getCurrentPosition(
function(position) {
console.log(position.coords.longitude, position.coords.latitude) // getCurrentPosition()获取到的经纬度
BMap.init().then((BMap) => {
const point = new BMap.Point(position.coords.longitude, position.coords.latitude)
const gc = new BMap.Geocoder()
gc.getLocation(point, function(rs) {
const addComp = rs.addressComponents
const address = rs.address //得到当前地址
console.log(address, '地址', addComp)
})
})
},
function(e) {
throw (e.message)
}
)
}
}