uniapp h5、app获取经纬度、地址

1 安装vue-resource, 因为h5请求会跨域,我们需要安装这个插件

 cnpm i --save vue-jsonp  或 npm i --save vue-jsonp 根据使用的包管理器来

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获取到