uniapp微信小程序获取当前城市名称逆地址解析实例教程

 更新时间:2022年11月22日 11:22:55   作者:清风无影Q  
最近在用uni-app开发小程序,需要获取用户所在城市,小程序本身没有这样的api,那么怎么实现呢?下面这篇文章主要给大家介绍了关于uniapp微信小程序获取当前城市名称逆地址解析的相关资料,需要的朋友可以参考下

问题

uniapp开发的小程序需要获取当前城市名称

解决步骤

看文档

当然是看uniapp文档,我们查到有提供相关的API,即uni.getLocation(OBJECT),获取当前的地理位置、速度。

我们试试吧

uni.getLocation({
	type: 'wgs84',
	geocode:true,
	success: function (res) {
		console.log('当前位置的经度:' + res.longitude);
		console.log('当前位置的纬度:' + res.latitude);
	}
});

我们发现只能返回经纬度信息,并不会返回城市信息。

原来是只有app才支持geocode

哈哈事情没有想象中那么简单~

思考ing…

查阅了相关资料,原来是位置详细信息的一些保密协议,并不能直接获取到。那么我们就需要通过经纬度,利用腾讯地图JavaScript SDK逆地址解析,即输入坐标返回地理位置信息。

有方法了,开整

逆地址解析

1. 创建应用

打开腾讯地图开放平台,创建应用

然后

控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选

小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限

授权ip即当前连接服务的IP地址(注意:上线后这个一定要换成上线IP地址哦)

填入微信小程序appid

现在有了地图秘钥key

2. uniapp配置 pages.json配置

加入以下配置项,用于申请获得位置权限

"permission": {
	"scope.userLocation": {
		"desc": "你的位置信息将用于小程序位置接口的效果展示" 
	}
}

uniapp配置

这里填写的描述信息就是微信弹起信息微信授权弹框的描述信息

3. 代码部分

下载微信小程序JavaScriptSDK

var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '' // 必填
});

key即申请的腾讯地图秘钥key

uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: function (res) {
				//逆地址解析  坐标转地址信息
				qqmapsdk.reverseGeocoder({
				  //Object格式
				       location: {
				         latitude: res.latitude,
				         longitude: res.longitude
				       }, 
				    success: function(res) {//成功后的回调
					   const mapdata=res.result.ad_info;
					   that.city = mapdata.city;
				   },fail: function(error) {
				       console.error(error);
				     },
				     complete: function(res) {
				       //console.log(res);
				     }
				});
				
			}
		});

编译

我们看返回信息

现在是有返回当前位置详细信息了,当前也包括城市名称。

问题解决!

总结

到此这篇关于uniapp微信小程序获取当前城市名称逆地址解析的文章就介绍到这了,更多相关uniapp微信小程序获取城市名称内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript获得指定对象大小的方法

    JavaScript获得指定对象大小的方法

    这篇文章主要介绍了JavaScript获得指定对象大小的方法,涉及javascript针对元素遍历与属性操作的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

    在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

    今天小编就为大家分享一篇在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 由浅到深了解JavaScript类

    由浅到深了解JavaScript类

    由浅到深了解JavaScript类...
    2007-01-01
  • 微信小程序自定义tabBar的步骤记录

    微信小程序自定义tabBar的步骤记录

    微信小程序开发越来越多样化,各种丰富的设计及体验,自定义tabBar也经常使用,下面这篇文章主要给大家介绍了关于微信小程序如何自定义tabBar的相关资料,需要的朋友可以参考下
    2021-08-08
  • javascript实现全局匹配并替换的方法

    javascript实现全局匹配并替换的方法

    这篇文章主要介绍了javascript实现全局匹配并替换的方法的总结,十分的简单实用,有需要的小伙伴可以参考下。
    2015-04-04
  • webpack的tree shaking的实现方法

    webpack的tree shaking的实现方法

    这篇文章主要介绍了webpack的tree shaking的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • javascript cookie的简单应用

    javascript cookie的简单应用

    这篇文章主要介绍了javascript cookie的简单应用,我们先介绍一下cookie的使用,以及我后面简单封装一个cookie操作的单例,便于实现cookie的设置,获取,删除的方法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 浅谈javascript中的Function和Arguments

    浅谈javascript中的Function和Arguments

    下面小编就为大家带来一篇浅谈javascript中的Function和Arguments。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 史上最为详细的javascript继承(推荐)

    史上最为详细的javascript继承(推荐)

    这篇文章主要介绍了javascript继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javascript实现鼠标放上后下边对应内容变换的效果

    javascript实现鼠标放上后下边对应内容变换的效果

    这篇文章主要介绍了javascript鼠标放上后下边对应内容变换的方法,实例分析了javascript实现tab切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论