//这里是在vue项目中引入的
import BMap from '@/map.js'
map.js
export default {
init: function() {
//ak**,百度地图官网申请
const AK = 'TSpELy6zjlBNKjbK9gigIwtd1m7p795m'
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)
})
}
}
<div @click="etLongitudeLatitude">定位</div>
const etLongitudeLatitude = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
}
}
//定位数据获取成功响应
function onSuccess(position) {
// alert('纬度: ' + position.coords.latitude + '\n' +
// '经度: ' + position.coords.longitude + '\n' +
// '海拔: ' + position.coords.altitude + '\n' +
// '水平精度: ' + position.coords.accuracy + '\n' +
// '垂直精度: ' + position.coords.altitudeAccura)
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)
addressData.area = addComp.province + '/' + addComp.city + '/' + addComp.district
addressData.addressDetail = addComp.street + addComp.town + addComp.streetNumber
})
})
}
//定位数据获取失败响应
function onError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("您拒绝对获取地理位置的请求");
break;
case error.POSITION_UNAVAILABLE:
alert("位置信息是不可用的");
break;
case error.TIMEOUT:
alert("请求您的地理位置超时");
break;
case error.UNKNOWN_ERROR:
alert("未知错误");
break;
}
}