vue的定位

高德定位

https://blog.csdn.net/YY110621/article/details/87921605（copy）

話很少說，直接寫方法步驟，須要的直接拿去放在本身項目中便可使用
先看下效果圖：

第一步：在項目中建立一個js文件，而後把下面的代碼所有拷貝進去

/**
* 高德地圖定位
* @type {{}}
*/
export const location = {
initMap(id){
let mapObj = new AMap.Map(id, {})
let geolocation;
mapObj.plugin(['AMap.Geolocation'], function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默認:true
timeout: 10000, // 超過10秒後中止定位，默認：無窮大
maximumAge: 0, // 定位結果緩存0毫秒，默認：0
convert: true, // 自動偏移座標，偏移後的座標爲高德座標，默認：true
showButton: true, // 顯示定位按鈕，默認：true
buttonPosition: 'LB', // 定位按鈕停靠位置，默認：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
showMarker: true, // 定位成功後在定位到的位置顯示點標記，默認：true
showCircle: true, // 定位成功後用圓圈表示定位精度範圍，默認：true
panToLocation: true, // 定位成功後將定位到的位置做爲地圖中心點，默認：true
zoomToAccuracy: true // 定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition()
})
return geolocation;
}
}
第二步：在須要用到的頁面引入你建立的這個js文件（下面這是個人引入路徑能夠替換成你的便可）
 

import { location } from "../../pages/utils/LocationUtil";
第三步：就是調用方法了。首先在methods方法中聲明方法，而後在mounted掛在後調用聲明的方法便可
 

methods: {
/**獲取地圖定位*/
getLocation() {
let _that = this;
let geolocation = location.initMap("map-container"); //定位
AMap.event.addListener(geolocation, "complete", result => {
_that.lat = result.position.lat;
_that.lng = result.position.lng;
_that.province = result.addressComponent.province;
_that.city = result.addressComponent.city;
_that.district = result.addressComponent.district;
});
},
}


mounted() {
this.getLocation(); // 調用獲取地理位置
}

 

百度定位

https://blog.csdn.net/weixin_43837268/article/details/84634291（copy）