uniapp 获取定位以及经纬度转换为城市名

这用的腾讯地图来获取定位，以及逆地址解析成城市名，具体逆地址解析后有哪些参数可以自己打印看一下或去官网看我这是h5，记得在h5配置里勾选上定位和地图并填上密钥key封装在js文件里//引入jquery文件，用jquery的jsonp来访问腾讯地图的逆地址解析，只适用于h5和pcimport $ from './jquery-3.0.0.min.js'//获取位置信息function getLoca

前端菜鸟丶Ndie

7052人浏览 · 2021-07-13 14:27:18

前端菜鸟丶Ndie · 2021-07-13 14:27:18 发布

/*
 2021/8/26
 xh
 获取地理位置经纬度及城市名(h5,app,微信小程序三端)
 */
// #ifdef H5
//引入jquery文件，用jquery的jsonp来访问腾讯地图的逆地址解析，只适用于h5和pc
import $ from './jquery-3.0.0.min.js'
// #endif
// #ifdef MP-WEIXIN
//腾讯地图的逆地址解析,下载地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
import QQMapWX  from './qqmap-wx-jssdk.js'
// #endif

//获取位置信息
export const getLocation = function(){
  return new Promise((rel,rej)=>{
		// #ifdef H5
		uni.getLocation({
			type:'gcj02',
			success:async (res)=>{
				/* console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude); */
				var city = await getH5MapCity(res.latitude,res.longitude);
				let obj = {
					name:city,
					jing:res.longitude,
					wei:res.latitude
				}
				console.log('H5')
				if(city !== false){
					rel(obj);
				}else{
					rej('获取失败');
				}
			},
			fail(res){
				rej('获取失败');
				uni.showToast({
					title:'位置获取失败',
					icon:'none',
					duration:2000
				})
			}
		})
		/* // 腾讯地图Api
		const qqmapsdk = new QQMapWX({ key: "xxxxxxx" });
		uni.getLocation({
			type:'gcj02',
			success(res){
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success(e) {
						let obj = {
							name:e.result.ad_info.city,
							jing:res.longitude,
							wei:res.latitude
						}
						if(e.result.ad_info.city){
							rel(obj);
						}else{
							rej('获取失败');
						}
						console.log(e);
					},
					fail(res){
						rej('获取失败');
						uni.showToast({
							title:'位置获取失败',
							icon:'none',
							duration:2000
						})
					}
				})
			}
		}) */
		// #endif
		
		//app位置获取
		// #ifdef APP-PLUS
		uni.getLocation({
			type:'gcj02',
			geocode:true,
			success(res){
				console.log(res)
				let obj = {
					name:res.address.city,
					jing:res.longitude,
					wei:res.latitude
				}
				console.log('APP')
				if(res.address.city){
					rel(obj);
				}else{
					rej('获取失败');
				}
			},
			fail(res){
				rej('获取失败');
				uni.showToast({
					title:'位置获取失败',
					icon:'none',
					duration:2000
				})
			}
		})
		// #endif
		
		//微信小程序
		// #ifdef MP-WEIXIN
		// 获取授权信息
		uni.getSetting({
		  success: res => {
			if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {
			  if (res.authSetting["scope.userLocation"]) {
				getCityInfo();
			  } else {
				uni.showModal({
				  title: "提示",
				  content: "请重新授权获取你的地理位置，否则部分功能将无法使用",
				  success: (res) => {
					if (res.confirm) {
					  uni.openSetting({
						success: () => getCityInfo()
					  });
					} else {
					  rej('获取失败');
					  uni.showToast({
						title:'请授权获取你的地理位置，否则部分功能将无法使用！',
						icon:'none',
						duration:2000
					  })
					}
				  },
				  fail(res){
					rej('获取失败');
					uni.showToast({
						title:'位置获取失败',
						icon:'none',
						duration:2000
					})
				  }
				});
			  }
			} else {
			  getCityInfo();
			}
		  }
		})
	 
		// 获取地理位置信息
		const getCityInfo = () => {
			  // 腾讯地图Api
			  const qqmapsdk = new QQMapWX({ key: "xxxxxxxxxxxx" });
			  // 授权
			  uni.authorize({
				scope: "scope.userLocation",
				success: () => {
				  uni.getLocation({
					type: "gcj02", //  wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
					success: res => {
					  qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success(e) {
							let obj = {
								name:e.result.ad_info.city,
								jing:res.longitude,
								wei:res.latitude
							}
							if(e.result.ad_info.city){
								rel(obj);
							}else{
								rej('获取失败');
								uni.showToast({
									title:'位置获取失败',
									icon:'none',
									duration:2000
								})
							}
							console.log(e);
						},
						fail(res){
							rej('获取失败');
							uni.showToast({
								title:'位置获取失败',
								icon:'none',
								duration:2000
							})
						}
					  });
					}
				  });
				},
				fail(res){
					rej('获取失败');
					uni.showToast({
						title:'请授权获取你的位置，否则部分功能将无法使用！',
						icon:'none',
						duration:2000
					})
				}
			})
		}
		// #endif
	})
}

// h5腾讯地图逆解析(将经纬度转成城市名)
function getH5MapCity(latitude, longitude){
	return new Promise((rel,rej)=>{
		var url = 'https://apis.map.qq.com/ws/geocoder/v1/?';//腾讯地图经纬度转城市名的链接
		var data ={
					key:'xxxxxxxxx',//腾讯地图密钥
					output:'jsonp',
					location:latitude+','+longitude //经纬度
				}
		//用jquery的jsonp来解决跨域问题
		$.ajax({
			type:'get',
			dataType:'jsonp',
			data,
			jsonp:"callback",
			url,
			success(res){
				var cityName = res.result.address_component.city;
				console.log(res);
				rel(cityName);
			},
			error(res){
				uni.showToast({
					title:'位置获取失败',
					icon:'none',
					duration:2000
				})
				rej(false);
			}
		})
	})
}

jsonp插件来解决跨域，实现逆解析

下载 vue-jsonp 插件

main.js

import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp);//用jsonp来解决腾讯地图逆解析跨域问题

页面

//腾讯地图逆解析，解决跨域
getUserLocation(e) {
	const that = this;
	let locationObj = e.latitude + ',' + e.longitude;
	let url = 'https://apis.map.qq.com/ws/geocoder/v1/?';
	this.$jsonp(url, {
		key:that.$key,//腾讯地图密钥
		output:'jsonp',
		location:e.latitude+','+e.longitude //经纬度
	})
	.then(res => {
		console.log(res)
	})
	.catch(err => {
		uni.showToast({
			title:'解析失败',
			icon:'none'
		})
	});

},