uniapp使用腾讯云获取位置转为省市区

腾讯云获取位置转为省市区

腾讯位置服务提供了多种SDK程序包,其中的JavaScript版本的SDK适用于微信小程序,所以我们下载这个SDK包。

下载地址

在小程序项目中,创建lib目录,把SDK文件放入其中

js 复制代码
<script>
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				addrlocal: null,
			}
		},
		methods: {
			myLocation() { //5LFBZ-5HV6L-SAIPY-E6BNI-O7FOJ-XNFAN 
				const self = this; // 保存Vue实例的引用
				console.log(self.addrlocal);
				//获取地理定位
				uni.getLocation({
					type: 'wgs84',
					success: function(resp) {
						let latitude = resp.latitude;
						let longitude = resp.longitude;
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: function(resp) {
								// console.log(resp.result)
								let address = resp.result.address
								let addressComponent = resp.result.address_component
								let nation = addressComponent.nation;
								let province = addressComponent.province;
								let city = addressComponent.city;
								let district = addressComponent.district;
								console.log("address:" + address +
									"addressComponent:" + addressComponent +
									"nation:" + nation +
									"province:" + province +
									"city:" + city +
									"district:" + district)
								self.addrlocal = city + district; // 使用保存的self
								console.log(self.addrlocal);
								/**
								 * address:吉林省长春市南关区东岭南街3355号addressComponent:[object Object]nation:中国province:吉林省city:长春市district:南关区
								 */
							}
						})
					}
				})
			}
		},
		components: {
			"fuwu": fuwuItem
		},
		onLoad: function() {
			qqmapsdk = new QQMapWX({
				key: '5LFBZ-5HV6L-SAIPY-E6BNI-O7FOJ-XNFAN'
			});
			this.myLocation();
		}
	}
</script>
相关推荐
小马同学-13 小时前
OpenStack 使用实战:Web 界面与 CLI 命令行实验
运维·云计算·openstack
小马同学-18 小时前
OpenStack 镜像管理:Glance 镜像服务实验
运维·云计算·openstack
wuyk55519 小时前
从零吃透 MQTT 通信|第 10 章 阿里云 / 腾讯云 MQTT 设备完整对接实战,三元组、签名、设备上云调试
c语言·开发语言·stm32·学习·阿里云·云计算·腾讯云
聚搜云——JuSouClouD1 天前
搭建外贸网站想选用阿里云,找代理商采购划算吗?
阿里云·云计算
Dawn-bit1 天前
Linux 运维基础扩展:跳板机、堡垒机与物理服务器全流程
linux·运维·服务器·云计算·运维开发
EatFan1 天前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
六面体混凝土移动师2 天前
我把 Cloudflare 开源了
架构·云计算·agent
yunlaodacom2 天前
AWS亚马逊云服务代理商:EC2和S3为什么建议放在同一Region?跨Region流量费和网络成本怎么规划
网络·云计算·aws
韩曙亮2 天前
【AI 大模型】国内各平台 AI 大模型 价格、性能 对比分析 ② ( 智谱 BigModel | 腾讯云 TokenHub | 千问 AI 平台 )
人工智能·ai·大模型·腾讯云·ai大模型·千问·智谱
云老大-阿里云国际站代理商2 天前
腾讯云国际站渠道代理商:新加坡CVM怎么搭配TencentDB?企业部署、内网连接和高可用怎么规划
云计算·腾讯云