uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息

前言:我好像隐隐约约的记得前几个月用uniapp开发微信小程序使用API接口uni.getLocation好像能获取到城市信息,但是现在只能获取到经度、纬度了,然后去看了一下uniapp官网发现仅App端支持......好吧!那可能是我记错了,也没关系,竟然能获取到经度和纬度那我们就使用第三方接口来处理。去网上找了一下腾讯位置服务可以为我们提供一个叫逆地址解析接口刚好可以满足我们的需求,那就用这个来实现吧!!

1.配置全局属性

在获取位置前我们需要在manifest.json文件配置一下requiredPrivateInfospermission全局属性才可以正常的使用。 

配置permission属性:点开manifest.json选择微信小程序配置勾选位置接口在描述里面填上描述文字然后在源码视图里面查看就会多出图二中标注二的内容配置。

配置requiredPrivateInfos属性:在mp-weixin里面加上requiredPrivateInfos属性配置上你需要使用的接口名字就好了,这里我只配置了getLocation。

f63aa78c93ba4ad0a7944e9c4f5f90f7.png

3099f72bb18d4bf2967d5164bc4b3c51.png

2.配置腾讯位置服务得到对应的Key和js文件

具体的配置步骤在下方图片你们看着这个官网来弄,配置好就会得到对应的Key再把下载的js文件放在项目的静态文件夹里。

f045f4a65e584b35a3717e7ec1871713.png

 3.获取位置信息

获取位置信息的方法步骤:

  1. 引入你在腾讯位置服务下载好的js文件
  2. 使用uni.authorize()发起授权申请
  3. uni.getLocation()接口得到位置对应的经纬度
  4. 把得到的经纬度传给逆地址解析接口

 按照上面的步骤写好代码以后持行会返回包含城市信息的对象然后我们就可以使用了,具体的代码如下:

// 导入腾讯位置服务js
import QQMapwx from '../../common/qqmap-wx-jssdk1.1/qqmap-wx-jssdk.min.js'

// 获取位置信息
getLocation() {
	var _this = this
	uni.authorize({
		scope: 'scope.userLocation',
		success() {
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy: true,
				success: function(res) {
					console.log(res)
					// 腾讯位置服务
					const qqmapsdk = new QQMapwx({
				    	key: '你得到的Key'
					});
					qqmapsdk.reverseGeocoder({
						// 通过纬度 经度来查询地址
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: (re) => {
							console.log(re)  // 城市信息
							_this.location = re.result.ad_info.city
						}
					})
				},
				fail(res) {
					uni.showToast({
						title: '获取失败',
						icon: 'error',
						duration: 2000
					})
					console.log(res)
				}
			})
		}
	})
}

有的小伙伴就觉得使用第三方的接口会不会收钱呀,这个我们可以去腾讯位置服务官网看看介绍就知道了,下面就是官网的说明,看我标注的地方写道免费配额大家应该就知道是不是免费了。我们使用的是逆地址解析,个人开发者每日可免费调用10000次,企业开发者每日可以免费3000000次完全是够用的,除非你为大企业定制一天需要用到超过3000000次定位的小程序,需要额外的去申请

47a6571089e94703aa38db00cc90744e.png

没关注的小伙伴点点关注!!!!

### 实现 UniApp微信小程序腾讯地图选点并获取省市区 #### 准备工作 为了在 UniApp 开发环境中集成腾讯地图 API 并实现选择地点以及获取对应的省市区信息,需要完成如下准备工作: - 注册并登录腾讯位置服务平台账号,在应用管理页面创建新应用,并记录下分配的应用 Key[^3]。 - 进入微信公众平台的小程序官方后台,在设置下的第三方服务中的插件管理部分添加“腾讯位置服务地图选点”和“腾讯位置服务城市选择器”的插件申请[^2]。 #### 编写代码逻辑 ##### 初始化地图组件 确保项目中已安装 `@dcloudio/uni-ui` 组件库以便于使用内置的地图组件。接着可以在页面配置文件中引入腾讯地图 SDK 及其样式表: ```html <template> <view class="container"> <!-- 地图容器 --> <map id="myMap" :longitude="location.longitude" :latitude="location.latitude"></map> <!-- 显示地址详情 --> <text>{{ addressInfo }}</text> <!-- 添加按钮用于触发重新定位或确认所选项 --> <button @click="getCurrentLocation">更新我的位置</button> <button @click="confirmSelection">确认选择的位置</button> </view> </template> ``` ##### JavaScript 部分处理函数定义 接下来编写主要业务逻辑来初始化地图实例、监听用户交互事件(比如拖拽结束)、请求反向地理编码接口以获得详细的行政区划数据等操作。 ```javascript <script> export default { data() { return { location: { longitude: '', latitude: '' }, // 当前坐标点经纬度 addressInfo: '正在加载...', // 展示给用户的地址描述文字 mapContext: null, // 存储地图上下文对象引用 }; }, onLoad(options) { this.initMap(); }, methods: { initMap() { const that = this; wx.getLocation({ type: 'gcj02', success(res) { that.location = res; // 设置初始中心点为当前位置 // 创建地图上下文环境并与 HTML 页面上的 map 标签关联起来 that.mapContext = uni.createMapContext('myMap', this); // 订阅地图状态变化通知,特别是标记被移动后的回调 that.mapContext.onMarkerTap(() => {}); that.mapContext.onRegionChangeEnd((e) => { if (e.causedBy === "drag") { that.getAddressFromCoordinates(that.location); // 移动后立即查询新的位置信息 } }); }, fail(err) { console.error("Failed to get current location:", err); } }); // 请求一次默认的当前位置解析 this.getCurrentLocation(); }, getCurrentLocation() { let that = this; wx.chooseLocation({ // 使用 chooseLocation 方法可以更方便地让用户手动挑选具体位置 success(res) { that.location = res; that.getAddressFromCoordinates(res); }, fail(err) { console.log(`chooseLocation failed:${JSON.stringify(err)}`); } }) }, getAddressFromCoordinates(locObj) { var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js').QQMapWX; var qqmapsdk = new QQMapWX({ key: '您的腾讯地图Key' // 替换成自己申请的有效密钥 }); qqmapsdk.reverseGeocoder({ location: locObj, success(response){ this.addressInfo = response.result.ad_info.province + ',' + response.result.ad_info.city + ',' + response.result.ad_info.district ; }, fail(error){ console.warn("Reverse geocoding error",error); } }); }, confirmSelection(){ // 用户点击确认按钮之后的操作... alert(this.addressInfo); } } } </script> ``` 上述代码实现了通过调用微信提供的 `getLocation()` 接口自动获取设备所在地理位置作为起点;利用 `createMapContext()` 构建了一个与 `<map>` 元素绑定在一起的对象来进行后续控制;每当检测到地图视窗发生改变时都会尝试去刷新最新的行政区域名称展示给前端用户查看;最后还提供了两个按钮分别用来刷新最新位置或是提交最终选定的结果。 #### 注意事项 - 应用过程中务必注意保护好自己的 API 密钥安全,防止泄露造成不必要的损失。 - 对外暴露的服务端接口应当做好必要的鉴权校验措施,避免恶意访问带来的风险。 - 如果遇到性能瓶颈或者其他技术难题建议查阅官方文档寻求帮助或者联系技术支持团队解决。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值