安装插件
首先npm install vue-amap --save
main.js代码:
import AMap from 'vue-amap';
Vue.use(AMap)
AMap.initAMapApiLoader({
key: '问后端要',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor',
'AMap.CircleEditor', 'AMap.Geolocation']
});
vue页面代码:
export default {
data() {
let self = this;
return {
positions: {
lng: "",
lat: "",
address: "",
loaded: false
},
center: [121.59996, 31.197646],
plugin: [
{
pName: "Geolocation",
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
console.log(result.position.lng,result.position.lat); // 能获取定位的所有信息
if (result && result.position) {
// self.str = result.formattedAddress;
// self.positions.address = self.str.substring(
// self.str.indexOf("市") + 1
// );
self.positions.lng = result.position.lng;
self.positions.lat = result.position.lat;
self.positions.loaded = true;
self.$nextTick();
// 把获取的数据提交到 store 的数据中,以便其他单文件组件使用
// self.$store.commit("POSITION", self.positions);
// console.log(self.positions);
sessionStorage.setItem(
"id",
JSON.stringify(
result.position.lng + "," + result.position.lat
)
);
}
});
}
}
}
]
};
},
mounted() {
console.log(window.sessionStorage.id) //可以获取到经纬度
}
}
重新获取定位方法:
//重新获取地理位置
getLocation() {
let self = this;
return new Promise((resolve, reject) => {
// sessionStorage中没有缓存,则开始定位
AMap.service(["AMap.Geolocation"], () => {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: false, //是否使用高精度定位,默认:true
timeout: 5000 //超过5秒后停止定位,默认:无穷大
});
// 获取位置信息
geolocation.getCurrentPosition((status, result) => {
// console.log(result.position.lng,result.position.lat); // 能获取定位的所有信息
if (result && result.position) {
self.positions.lng = result.position.lng;
self.positions.lat = result.position.lat;
self.positions.loaded = true;
self.$nextTick();
// 把获取的数据提交到 store 的数据中,以便其他单文件组件使用
sessionStorage.setItem(
"id",
result.position.lng + "," + result.position.lat
);
}
});
// 获取位置信息完成触发事件
});
});
}