uniapp微信小程序获取定位(通过经纬度获取地址)

项目要求首页有个定位功能,但是uni.getLocation在小程序端只能获取到经纬度,拿不到地址
uniapp官网有说明这点:uni.getLocation(OBJECT) | uni-app官网

 

解决方案如下:

1. 配置manifest.json

 2.引入腾讯地图(需要申请key并下载sdk):微信小程序JavaScript SDK | 腾讯位置服务

 

圈住的5点建议全做,否则可能会出现问题 

第2步不做可能报错:位置转经纬度~此key未开启WebserviceAPI服务功能

3.代码

在需要的页面引入

import QQMapWX from "../static/sdk/qqmap-wx-jssdk.min.js";
onLoad() {

	this.getLocation()   //获取当前定位
			
},
getLocation(){
	const _this = this
	uni.authorize({
		scope: 'scope.userLocation',
		success() {
			let location = {
				longitude: 0,
				latitude: 0,
				province: "",
				city: "",
				area: "",
				street: "",
				address: "",
			};
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					uni.setStorageSync('latitude', _this.latitude)
					uni.setStorageSync('longitude', _this.longitude)
					location.longitude = res.longitude;
					location.latitude = res.latitude;
					const qqmapsdk = new QQMapWX({
						key: 'PBZBZ-74CE3-7ND3P-3OVWM-HDZIT-QRF23'  //申请的key
					});
					qqmapsdk.reverseGeocoder({
						location,
					    success: function(res) {
							let info = res.result;
							location.province = info.address_component.province;
							location.city = info.address_component.city;
							location.area = info.address_component.district;
							location.street = info.address_component.street;
							location.address = info.address;
							console.log(location);
                        },
					});
				},	
				fail: function(err) {
					uni.showToast({
							title: '获取定位失败',
							icon: 'none'
					})
				}
			})
		}
	})
},

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当面试官问到uniapp微信小程序相关的试题时,你可以参考以下问题答案: 1. 什么是uniapp? - uniapp是一个基于Vue.js开发跨平台应用框架,可以同时开发iOS、Android、H5和微信小程序等多个平台的应用。 2. 什么是微信小程序? - 微信小程序是一种在微信平台上运行的应用程序,用户可以在微信中直接使用,无需下载安装。 3. uniapp微信小程序有什么关系? - uniapp可以开发微信小程序,通过uniapp的跨平台特性,开发者只需要编写一套代码,就可以同时在多个平台上运行。 4. uniapp开发微信小程序的优势有哪些? - 跨平台开发:只需编写一套代码,即可在多个平台上运行。 - 开发效率高:使用Vue.js进行开发,具有简洁、灵活的语法,提高开发效率。 - 统一的UI组件:uniapp提供了一套统一的UI组件库,方便开发者快速构建界面。 - 支持原生能力:uniapp支持调用原生API,可以实现更多的功能。 5. uniapp开发微信小程序的限制有哪些? - 对于一些特定的微信小程序API,uniapp可能无法直接调用,需要通过插件或自定义组件来实现。 - 由于不同平台的差异,一些特定的样式和功能在不同平台上可能会有差异。 6. uniapp中如何实现微信小程序的页面跳转? - 可以使用uniapp提供的`uni.navigateTo`、`uni.redirectTo`、`uni.switchTab`等方法来实现页面跳转。 7. uniapp中如何调用微信小程序的原生API? - 可以使用uniapp提供的`uni.request`、`uni.showToast`等方法来调用微信小程序的原生API。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值