uniapp 实现点击地图选择地址功能

前言

  1. 需求:懒人客户要求填写地址更方便一点,so,赠送新功能,选择地址功能。
  2. 需要准备高德地图key,安卓和ios 都要申请,至于怎么申请大家自行搜索,参考官网,需要注意的地方就是 包名,sha1 等必须一致
    在这里插入图片描述

需求

请添加图片描述
主要使用的是uni.getLocation,uni.chooseLocation,以及高德地图的逆地理编码

获取地址代码

export function getLocal(success) {
	uni.getLocation({
		type: 'gcj02',
		geocode:true,
		success: function(re) {
			uni.chooseLocation({
				latitude: re.latitude,
				longitude: re.longitude,
				success: function(resp) {
					/**
					 * 逆地理编码
					 * 参考 https://lbs.amap.com/api/webservice/guide/api/georegeo
					 */
					uni.request({
						url:"https://restapi.amap.com/v3/geocode/regeo",
						method:'get',
						data: {
						  location: resp.longitude + "," + resp.latitude,//位置坐标:格式:location=lng<经度>,lat<纬度>
						  key: '',//开发密钥(web服务Key)
						  radius: 0,
						  extensions: 'all',//base,返回基本地址信息;all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息
						  batch: false,
						  roadlevel: 1
						},
						success: function (res) {
							console.log(res,'====');
						  const data = res.data.regeocode;
						  const province = data.addressComponent.province;//省
						  const city = data.addressComponent.city;//市
						  const district = data.addressComponent.district;//区
						  const township = data.addressComponent.township;//街道
						  const address = township + data?.pois[0]?.name + data?.pois[0]?.address;
						  const reasult = {
							  province,
							  city,
							  district,
							  address,
						  }
						  success(reasult);
						},
						error: function (err) {
							uni.$u.toast("服务端错误,请重试");
						}
					
					})
				},
				fail(err) {
					uni.$u.toast("已取消");
					console.log(err,'err');
				},
			});
		}
	});
}

调用

getLocal((res) =>{})

打包设置

  1. mainifest.json
	"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" />",
	"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" />",
	"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" />",
	"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\" />",
	"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\" />",
	"<uses-permission android:name=\"android.permission.INTERNET\" />",
	"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\" />",
	"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />",
	"<uses-permission android:name=\"android.permission.ACCESS_LOCATION_EXTRA_COMMANDS\" />",
	"<uses-permission android:name=\"android.permission.BLUETOOTH\" />",
	"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" />"

在这里插入图片描述

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值