1 安装vue-resource, 因为h5请求会跨域,我们需要安装这个插件
cnpm install vue-jsonp --save 或 npm install vue-jsonp --save 根据使用的包管理器来
2 main.js文件中引入vue-resource并通过命令Vue.user()使用该插件
import VueJsonp from ‘vue-jsonp’
Vue.use(VueJsonp)
3 创建一个文件,开始写功能,我是创建了一个工具文件夹utils放在indedx.js文件夹下
import { jsonp } from 'vue-jsonp';
//app直接获取地理位置，不需要发起请求
export function getLocationInfo() { //2. 获取地理位置
// #ifdef H5
// 适配h5请求跨域问题
return new Promise((resolve, reject) => {
uni.getLocation({
type: 'gcj02',
success: async (res) => {
const latitude = res.latitude.toString();
const longitude = res.longitude.toString();
uni.setStorage({ //将经纬度保存到本地
key: 'coordinate',
data: {
'latitude': res.latitude,
'longitude': res.longitude,
},
});
const url = 'https://apis.map.qq.com/ws/geocoder/v1';
//通过经纬度换取地址
await jsonp(url, {
key: '4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
location: `${latitude},${longitude}`,
output: 'jsonp',
}).then(re => {
// console.log(re, 'Tengx ');
let address = re.result.address_component;
resolve(address);
}).catch(err => {
console.log(err);
reject(err);
});
},
});
});
// #endif
return new Promise((resolve, reject) => {
uni.getLocation({
type: 'gcj02',
success(res) {
let latitude, longitude;
uni.setStorage({ //将经纬度保存到本地
key: 'coordinate',
data: {
'latitude': res.latitude,
'longitude': res.longitude
}
});
latitude = res.latitude.toString();
longitude = res.longitude.toString();
uni.request({
header: {
"Content-Type": "application/text"
},
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' +
longitude + '&key=4KQBZ-W5N36-CJKSF-EQQN4-2OXTZ-V4F5J',
success(re) {
if (re.statusCode === 200) {
let address = re.data.result.address_component;
resolve(address);
} else {
// getLocationInfo();
}
}
});
}
});
})
}
4 页面调用,在需要使用的页面引入并调用该函数即可如:home.vue页面
<script>
import {getLocationInfo,} from "../../utils/index.js";
onReady() {
this.onGetArea(
},
methods:{
async onGetArea() {
let address = await getLocationInfo()
}
}
题外话,如果仅需要经纬度,可以直接使用uni.getLocation获取到
