Vue 获取当前地理位置
第一步：在项目中index.html文件中引入高德地图
第二步：在项目中创建一个Location.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 "../../utils/Location";
mounted() {
this.getLocation(); // 调用获取地理位置
},
methods: {
getLocation() {
let _that = this;
let geolocation = location.initMap("map-container"); //定位
AMap.event.addListener(geolocation, "complete", result => {
console.log(result);
console.log("hhha");
_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;
});
},
tab(index, val) {
this.currIndex = index;
this.$router.push(val);
}
},
转播
