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

原创

已于 2023-07-27 11:15:52 修改 · 3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #逆地址解析

于 2022-04-13 09:49:07 首次发布

本文介绍了如何在Vue项目中利用vue-resource插件解决H5跨域问题，获取并解析地理位置信息。首先通过cnpm或npm安装vue-jsonp，然后在main.js中引入并使用。接着在工具文件中导出一个函数getLocationInfo，此函数根据平台差异调用uni.getLocation获取经纬度，并通过vue-jsonp发送JSONP请求转换为地址。最后，在需要的页面引入并调用该函数获取地理位置。

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