uniapp｜微信小程序获取当前城市名称--逆地址解析
六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，项目实战经验
关注博主不迷路~
文章目录
- 问题
- 解决步骤
- 看文档
- 逆地址解析
- 1. 创建应用
- 2. uniapp配置
- 3. 代码部分
- 总结
问题
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｜微信小程序获取当前城市名称--逆地址解析相关推荐
- uni-app 微信小程序获取位置信息提示“getLocation 需要在 app.json 中申明 permission 字段”
本文同步发布在:uni-app 微信小程序获取位置信息提示"getLocation 需要在 app.json 中申明 permission 字段 我们在用 uni-app 开发微信小程序时, ...
- uniapp/微信小程序获取蓝牙设备
uniapp/微信小程序获取蓝牙设备 view script style 此文章只是获取蓝牙设备,不涉及连接设备,连接设备敬请期待!!! view <u-navbar :is-back=&quo ...
- 微信小程序-获取当前城市位置
微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...
- uni-app微信小程序获取手机号；微信小程序获取手机号，获取到后需要进行解密；微信小程序获取手机号失败 Error：该appId没有权限
方法1.uni-app登录加获取手机号解密-直接看此篇即可解决 微信小程序获取手机号注意点: 1.需要先登录,微信小程序登录看这篇 2.手机号获取到时加密的,需要后端解密或者前端自己解密(解密时候就会 ...
- 微信小程序获取当前城市地址
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); var qqmapcity_name:"",onLoad: func ...
- uniapp微信小程序获取屏幕宽高
uniapp开发微信小程序的时候,有时候去调整样式 你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx 有的朋友觉得可以使用vw vh % 是的,当然可以 但是要让你的元素,宽高,比如 ...
- uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
- uniapp微信小程序获取定位（通过经纬度获取地址）
项目要求首页有个定位功能,但是uni.getLocation在小程序端只能获取到经纬度,拿不到地址 uniapp官网有说明这点:uni.getLocation(OBJECT) | uni-app官网 ...
- uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
最新文章
- 随笔2：关于linux和python
- c# out ref
- 一年成为emacs高手
- Spring Boot中使用RabbitMQ
- 【视频课】先搞懂你用的模型，深度学习模型分析课程来了！
- 用DOS命令安装删除服务
- mysql表的视图怎么建立_MySQL如何创建视图
- traybox错误怎么办_toolbox提示错误无法使用怎么办？
- jenkins 配置
- css3自适应布局单位vw,vh你知道多少？
- 【es】es 写入流程
- Ubuntu 20.04 上搭建 LEMP/LAMP 环境运行 WordPress
- Emacs lisp函数调用defun(五)
- pyecharts折线图坐标轴范围设置_多层折线图，一对一展现数据趋势，图表就应如此美丽...
- 在html中如何批量操作系统,网刻批量操作系统
- Ubuntu深度学习环境配置（2）：Ubuntu18.04安装N卡驱动+anaconda3
- 面试官问上一家公司离职原因怎么办？
- Linux网络服务之DNS正向解析
- Python中利用海龟绘图（Turtle方法）画个钟表盘
- iOS、mac开源项目及库
热门文章