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>
相关推荐
宠友信息3 小时前
面向多端部署的社区平台技术方案:uniapp 与java微服务架构的工程化实践
java·微服务·微信·架构·uni-app·springboot
2501_915921437 小时前
没有 iOS 源码的前提下如何进行应用混淆,源码混淆失效后的替代
android·ios·小程序·https·uni-app·iphone·webview
可观测性用观测云11 小时前
聚力成林 | 观测云荣膺华为云年度生态合作共赢奖
云计算
2501_9151063211 小时前
Perfdog 成本变高之后,Windows 上还能怎么做 iOS APP 性能测试
android·ios·小程序·https·uni-app·iphone·webview
奶糖 肥晨11 小时前
JS自动检测用户国家并显示电话前缀教程|vue uniapp react可用
javascript·vue.js·uni-app
2501_9151063212 小时前
iOS 安装了证书,HTTPS 还是抓不到
android·网络协议·ios·小程序·https·uni-app·iphone
Code Slacker13 小时前
第八届传智杯AI云计算大数据开发挑战赛练习题库(三)
大数据·人工智能·云计算·竞赛
2501_9160074714 小时前
iOS 自动化上架的工具组合,在多平台环境中实现稳定发布
android·运维·ios·小程序·uni-app·自动化·iphone
1024小神14 小时前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app
weisian15114 小时前
入门篇--知名企业-17-阿里巴巴-5--阿里云百炼平台:不止是效率工具,更是大模型落地的全链路神器
阿里云·云计算·百炼