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

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1.配置全局属性

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

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

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

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

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

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

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

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

 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次定位的小程序,需要额外的去申请

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

没关注的小伙伴点点关注!!!!文章来源地址https://www.toymoban.com/news/detail-496297.html

到了这里,关于uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包