//安装插件
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']
});
//在需要应用的页面里写入
<template>
<div>
<el-amap vid="amap" :plugin="plugin" class="amap-demo"></el-amap>
</div>
</template>
<script>
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) //可以获取到经纬度
}
}
网友评论