位置: IT常识 - 正文

【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现(微信小程序怎么制作自己的小程序)

编辑:rootadmin
【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

目录

前言

效果展示

一、在腾讯定位服务配置微信小程序JavaScript SDK

二、使用uni-app获取定位的经纬度

三、 逆地址解析,获取精确定位

四、小提示


前言效果展示

推荐整理分享【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现(微信小程序怎么制作自己的小程序),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序开发,微信小程序游戏手游排行榜,微信小程序开发,微信小程序店铺怎么开,微信小程序开发平台,微信小程序制作,微信小程序店铺怎么开,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

一、在腾讯定位服务配置微信小程序JavaScript SDK

在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作

点进去之后,可以看到如下图红色框框的操作指导

第一步和第二步主要是申请秘钥和配置服务,可以直击点击我的应用跳转、接下来如下图片所示操作 

成功创建就会有如下图片的情况 

点击添加Key,然后进行配置 

配置成功,就会获得Key 

第三步、下载微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2 其中的一个即可,然后解压文件后,将其放入项目中,我这里放入在我的common组件中

 第四步可以忽略,第五步就是将文件引入,到你想要展现定位的页面,把申请的Key引入到onLoad生命周期中

var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现(微信小程序怎么制作自己的小程序)

this.qqmapsdk = new QQMapWX({key: '3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH'}); 二、使用uni-app获取定位的经纬度

在uni-app的API中找到位置

 将如下的代码放入mounted生命周期中获取经纬度

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

 这里还需要在manifest.json中的源码视图中添加一段配置权限的代码

"permission" : { "scope.userLocation" : { "desc" : "获取当前定位" } }

 

三、 逆地址解析,获取精确定位

调用qqmapsdk.reverseGeocoder的方法,在其中属性location中调用经纬度,这里要注意需要使用gcj02,还需要

通过属性success, fail, complete的回调参数来接收调用结果success的回调参数可以有2个,第1个参数接收调用结果,第2个参数控制返回处理后的数据(非必须参数),示例:success:function(res,data)

 

 address是自己定义为空,来接收地址,req中有如下内容

 address只要获取到定位即可req.result.address

mounted() {uni.getLocation({type: 'gcj02',highAccuracyExpireTime: 100,success: (res => {this.qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success:(req=>{this.address = req.result.addressconsole.log(this.address);})})})});},

 最后在页面上渲染address即可

 代码段中highAccuracyExpireTime: 100,是高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果,可以写也可以不写。

四、小提示

如果无法出现定位效果,需要降低调式基库的版本

结束语:

以上就是本次分享的全部内容,有任何问题,都可以私信我

本文链接地址:https://www.jiuchutong.com/zhishi/296201.html 转载请保留说明!

上一篇:Ubuntu系统 不使用snap安装firefox,使用firefox官网下载的安装包安装firefox(ubuntu busier)

下一篇:Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)(redux reducer使用教程)

  • 苹果芒果tv怎么关闭自动续费(苹果芒果tv怎么开启画中画)

  • 电脑玩lol卡顿不流畅是什么原因(电脑玩lol卡顿不流畅应该加什么硬件)

  • 华为nova5重多少(华为nova5z重量)

  • 蓝屏代码0x0000000a5(蓝屏代码0x0000000A原因)

  • 荣耀30红外怎么用(honor30红外)

  • vivo x50上市时间(vivo X50上市时间)

  • 苹果手机一直转圈圈(苹果手机一直转圈圈 强制关机都不行)

  • 华为p30pro语音助手怎么唤醒(华为p30pro语音助手听不到我说话)

  • 毒下单后可以马上退吗(毒下单之后可以取消吗)

  • 闲鱼已发货可以撤销订单吗(闲鱼已发货可以申请退款吗)

  • 一个手机怎样下载两个微信(一个手机怎样下载第二个微信)

  • qq等级加速包加多少(qq等级加速包加多少倍)

  • 直播的软件怎么下载(直播软件怎么做)

  • ios13怎么换微信提醒音(iphone13微信怎么换行)

  • 苹果换铃声步骤(苹果换铃声步骤是什么)

  • 苹果浮球开关在哪里(苹果浮球开关在哪里设置)

  • 货拉拉返程费用怎么收(货拉拉返程费用怎么算的)

  • 瀑布屏是曲面屏吗(瀑布屏是曲面屏还是直面)

  • 手环心率监测准吗(手环测心率准确)

  • 抖音开通淘宝的教程(抖音怎么开通淘宝)

  • 苹果6测距仪在哪里(苹果测距仪在黑暗中能用吗)

  • CentOS 6.6系统安装配置图文教程(centos 6.5安装教程)

  • Windows 10系统输入法的U模式(windows 10输入法)

  • JavaScript详解(javascriptjs)

  • 浏览器打开域名让它不自动添加显示index.html教程方法(浏览器打开域名怎么设置)

  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设 电脑维修 湖南楚通运网络