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微信小程序获取城市名称内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 简单的邮箱登陆的提示效果类似于yahoo邮箱

    简单的邮箱登陆的提示效果类似于yahoo邮箱

    类似于yahoo邮箱登陆的提示效果,当鼠标聚焦到邮箱地址文本框时,文本框文字被清空
    2014-02-02
  • 微信小程序使用第三方库Underscore.js步骤详解

    微信小程序使用第三方库Underscore.js步骤详解

    大家都知道Underscore.js是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。那么这篇文章我们就来学习下微信小程序如何使用第三方库Underscore.js,有需要的可以参考学习。
    2016-09-09
  • 关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

    关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

    这篇文章主要介绍了微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • JavaScript实现单图片上传并预览功能

    JavaScript实现单图片上传并预览功能

    这篇文章主要为大家详细介绍了JavaScript实现单图片上传并预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JavaScript计算出两个数的差值

    JavaScript计算出两个数的差值

    这篇文章主要为大家详细介绍了JavaScript计算出两个数的差值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现时分秒倒计时

    js实现时分秒倒计时

    这篇文章主要为大家详细介绍了js实现时分秒倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • js实现抽奖的两种方法

    js实现抽奖的两种方法

    这篇文章主要为大家详细介绍了js实现抽奖的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 通过实例了解JS执行上下文运行原理

    通过实例了解JS执行上下文运行原理

    这篇文章主要介绍了通过实例了解JS执行上下文运行原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • chatGPT教我写compose函数的详细过程

    chatGPT教我写compose函数的详细过程

    这篇文章主要介绍了chatGPT教我写compose函数,文中给大家介绍了chatGPT过程概略,本文结合实例代码图文给大家讲解的非常详细,需要的朋友可以参考下
    2023-02-02

最新评论