uni.chooseLocation(OBJECT)如何单独拿到省市区？

最新推荐文章于 2024-08-07 15:06:08 发布

HHHHH2187

最新推荐文章于 2024-08-07 15:06:08 发布

阅读量887

点赞数

文章标签：前端 vue.js 微信小程序

本文链接：https://blog.csdn.net/hhhhh2187/article/details/132410770

版权

文章介绍了如何在使用uni框架时，通过uni.chooseLocation获取地理位置时遇到的问题，推荐使用腾讯地图开放平台的reverseGeocoder功能，通过坐标逆地址解析获取单独的省市区信息。

摘要由CSDN通过智能技术生成

一：为什么使用uni.chooseLocation(OBJECT)不能单独获取省市区？

因为官方给出的返回数据并没有包含单独省市区，所以这里如果不使uni.getLocation(OBJECT)，
我们可以使用逆地址解析(坐标位置描述)，得到单独的省市区。腾讯位置开放平台

二：使用地图开放平台

2.1：首先去腾讯地图开放平台进行注册登录

2.2：申请key，下载JsSDK 按照官方步骤进行操作即可

三：导入sdk

将下载好sdk存放在项目某个文件下既可

import map from "common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js"；
 

// 实例化API核心类
var qqmapsdk = new map({
	key: 'key值' // 必填，腾讯地图申请
});
qqmapsdk.reverseGeocoder({
	//Object格式
		location: {
			latitude: “当前位置纬度”,
			longitude: “当前位置经度”
		},
		success: (res) => {
			console.log(res.result.ad_info); //位置信息
		},
		fail: (error) => {
			// console.error(error);
		}
});

四：整体现实

点击查看reverseGeocoder返回参数

import map from "common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js"；
export default {
    methods: {
        maphq() {
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					uni.chooseLocation({
						success: (res) => {
		                    //这里可以拿到打开地图后选择的具体地址名字  下面的逆解析拿不到
							// 实例化API核心类
							var mapsdk = new map({
								key: 'key值' // 必填
							});
							mapsdk.reverseGeocoder({
								//Object格式
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								success: (res) => {
										console.log(res.result.ad_info); //城市信息
								},
								fail: (error) => {
										// console.error(error);
								}
							});
						}
					});
				},
				fail: () => {
					uni.showModal({
						title: '提示',
						content: '位置权限获取失败，请重新授权！',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								this.ditu()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			})
		},
    }
}