uniapp:H5定位当前省市区街道信息

高德地图api,H5定位省市区街道信息。

由于uniapp的uni.getLocation在H5不能获取到省市区街道信息,所以这里使用高德的逆地理编码接口地址接口,通过传key和当前经纬度,获取到省市区街道数据。

这里需要注意的是:**高德地图API 申请的key,必须是WEB服务端**,才可以使用逆地址编码接口。

js 复制代码
uni.getLocation({
	type: 'gcj02', //返回可以用于uni.openLocation的经纬度
	geocode: true,
	success: (res) => {
		// #ifdef APP-PLUS
		this.city = res.address.city;
		// #endif
		this.latitude = res.latitude;
		this.longitude = res.longitude;
		// #ifdef H5
		uni.request({
			url: 'https://restapi.amap.com/v3/geocode/regeo', //逆地理编码接口地址。
			data: {
				key: 'eb144****************f2e0c',
				//location:经纬度  lng :经度  lat:纬度  
				location: this.longitude + ',' + this.latitude,
				radius: 1000,
				extensions: 'all',
				batch: false,
				roadlevel: 0
			},
			success: (res) => {
				console.log(res.data);
				//详细地址信息
				if (res.statusCode == 200 && res.data.info == 'OK') {
					this.city = res.data.regeocode.addressComponent.city
				}
			}
		});
		// #endif
	},
});
相关推荐
宸翰6 小时前
解决uni-app 中 SVG 图片在 iOS 端显示模糊问题
前端·uni-app
走到天涯海角7 小时前
uniApp蓝牙在手机上测试
智能手机·uni-app
bug总结1 天前
uniapp的easycom自动组件注册机制
uni-app
HF_code1 天前
uniapp-history路由深度指南
uni-app
suliqiang1 天前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
梦曦i2 天前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app
EatFan2 天前
【实战经验】uni-app使用 SSE 踩坑,EventSource不支持怎么办?
android·后端·ios·uni-app
凡泰AI2 天前
如何为政务 APP 搭建开放平台,实现多部门、第三方供应商标准化入驻与统一管理
android·大数据·小程序·uni-app·app·政务
梦曦i3 天前
@meng-xi/uni-router 未来展望:夯实基础、深化体验、探索前沿
前端·uni-app
2501_916007473 天前
使用Apple Dashboards显示和自定iOS应用性能指标与数据可视化指南
android·ios·小程序·https·uni-app·iphone·webview