uni-app 微信小程序 用高德sdk获取地理位置,以及天气信息

1、下载高德小程序sdk,并放在uni-app项目中

相关下载-微信小程序插件 | 高德地图API

2、使用高德小程序sdk 获取地理位置接口,天气信息接口
 
import amap from "@/libs/gaode/amap-wx.130.js";
let _this = this;
			let myAmapFun = new amapFile.AMapWX({
				key: '你的key'
			});
			myAmapFun.getWeather({
				success: (res) => {
					if (res.temperature.data) {
						_this.temperature = res.temperature.data;
					}
					if (res.weather.data) {
						_this.weather = res.weather.data;
					}
					//成功回调
				},
				fail: (info) => {
					//失败回调
					console.log(info)
				}
			})
3. 添加服务器域名(https://restapi.amap.com)

路径:微信公众平台 -> 小程序 -> 开发管理 -> 开发设置 -> 服务器域名

### UniApp 微信小程序集成高德地图获取用户当前位置 #### 准备工作 为了使微信小程序能够成功调用高德地图API来获得用户的地理位置信息,需先完成必要的准备工作。这包括但不限于申请有效的API Key以及按照官方指导设置项目权限。 对于API key的获取,访问高德开放平台网站注册账号并创建应用即可得到专属密钥[^1]。接着,在`manifest.json`文件内的`permission`部分添加相应授权声明以便后续操作顺利执行[^2]。 #### 实现过程 考虑到直接利用高德地图SDK可能存在的局限性——即其主要适用于APP端与网页环境而非原生支持小型应用程序框架下的场景;因此推荐采用HTTP请求的方式间接达成目的。具体做法如下: - 调用 `uni.getLocation()` 方法取得设备当前坐标数据; - 构建URL字符串向高德服务器发起GET请求传递上述所得经纬度参数; - 解析返回JSON对象提取所需地理描述详情。 ```javascript // 获取当前位置 async function getLocationInfo() { try { const res = await uni.getLocation({ type: 'gcj02', // 返回可以用于显示在地图上的坐标 geocode: true, }); let { latitude, longitude } = res; // 请求高德地图逆地理编码服务接口 const url = `https://restapi.amap.com/v3/geocode/regeo?key=您的Key&location=${longitude},${latitude}`; const geoRes = await uni.request({url}); console.log('Location Info:', geoRes.data.regeocode.formatted_address); } catch (error) { console.error(error); } } ``` 值得注意的是,由于安全策略限制,所有外部网络资源链接都应事先加入到微信公众平台上指定的小程序合法domain名单里才能正常加载[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y2000104

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值