vue 获取用户位置 高德_Vue <调用高德获取地理位置问题>

安装插件

首先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

);

}

});

// 获取位置信息完成触发事件

});

});

}