目的
在vue頁面，基于百度地圖獲取訪問當(dāng)前H5頁面用戶的位置信息（經(jīng)緯度）
1. 基于百度地圖開放能力獲取位置信息
- 在工程目錄下創(chuàng)建一個js文件（baiduLocation.js）,文件內(nèi)容如下：
/* * 加載地圖
* @param {Function} callback 回調(diào)函數(shù)名稱，回調(diào)函數(shù)將會掛載到window上，例如：window.initBaiduMapScript，在方法中就能拿到BMap對象
*/
export function loadBMap(callback) {
var script = document.createElement('script')
script.src = 'https://api.map.baidu.com/api?v=2.0&ak=你的AK信息&callback=' + callback
document.body.appendChild(script)
}
上述中绢记，你的AK信息值通過注冊百度地圖開放平臺賬號獲取
- 在需要獲取位置信息的頁面引入,具體如下：
<script>
import { loadBMap } from "./baiduLocation.js";
//頁面加載后
mounted(){
var that = this;
//定義回調(diào)函數(shù)
window.initBaiduMapScript = () => {
that.BMap = window.BMap;
var geolocation = new that.BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == 0) {//成功獲取位置信息
that.address = r;
console.dir(that.address);
} else {//無法獲取到位置信息
that.address = { latitude: "", longitude: "" };
}
},
{
enableHighAccuracy: true
});
};
//調(diào)用腳本獲取位置信息
loadBMap("initBaiduMapScript");
},
data(){
return{
address: {} //經(jīng)緯度信息
}
}
</script>
說明：
1. 上述address對象即包含了經(jīng)緯度信息
2. 該方式需要頁面url為https，否則存在定位不準(zhǔn)確正卧。
