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

news2025/7/17 1:16:56

目录

前言

效果展示

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

二、使用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');

	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.address
					console.log(this.address);
				})
			})
		})
	});
},

 最后在页面上渲染address即可

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

四、小提示

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

结束语:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406840.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React(四) ——hooks的使用

🧁个人主页:个人主页 ✌支持我 :点赞👍收藏🌼关注🧡 文章目录⛳React Hooks💸useState(保存组件状态)🥈useEffect(处理副作用)🔋useCallback(记忆函数&#…

Sass 和 SCSS

▣Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 CSS 的辅助…

使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」

文章目录前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口5.固定公网地址前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原…

微信小程序|基于小程序+云开发制作一个菜谱小程序

今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。 一、小程序1. 创建小程序</

【python】喜欢XJJ?这不得来一波大采集?

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 俗话说的好&#xff1a;技能学了~就要用在自己喜欢得东西上&#xff01;&#xff01; 这我不得听个话~我喜欢小姐姐&#xff0c;跳舞的小姐姐 这不得用python把小姐姐舞采集下来~嘿嘿嘿 完整源码、素材皆可点击文章下方名片…

Java web学生信息管理系统(jsp)

&#x1f95e;目录 &#x1f36c;1 概述 1.1课程设计目的 1.2预备知识 JAVAWeb&#xff1a; MySQL&#xff1a; JSP&#xff1a; 1.3实训的内容和要求 &#x1f36c;2 需求分析 2.1系统目标 2.2功能分析&#xff1a; 2.3开发环境&#xff1a; &#x1f36c;3 设计步…

大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】

一&#xff1a;案例效果 本次案例我们分析一下数据可视化页面最常见的热点图是如何实现的&#xff0c;其原理并不复杂&#xff0c;只需要用到CSS3动画属性 animation 以及 keyframe 关键帧即可&#xff0c;重点是向外扩散的环如何布局比较合适&#xff0c;以及每个环怎么扩散何…

HTML 5标签搭建页面结构--1

本文标签: HTML基本语法 排版标签 媒体标签 链接标签 文章目录 前言 一、基础认识 1.认识网页 2.微博标准 3.web标准的构成 4.小结 二、HTML基本结构解读 2.HTML标签及结构 1.标签的结构: 2.排版标签: 2.文本格式化标签: 3.媒体标签: 1.图像相关标签: 2.图片标签的 title …

JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)

文章目录1.1 第一章 初入宗门1.2 第二章 直接量1.3 第三章 数据类型1.4 第四章 数据类型扩展内容:1.5 第五章 基础考核1.6 第六章 何老1.7 第七章 对象数据类型1.8 第八章 对象的取值1.9 第九章 循环遍历的奥妙小结&#xff1a;For 循环1.10 第十章 对象内容的遍历1.11 第十一章…

30个题型+代码(冲刺2023蓝桥杯)(上)

愿意的可以跟我一起刷&#xff0c;每个类型做1~5题 &#xff0c;4月前还可以回来系统复习 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;一&#xff0c;前缀和 &#x1f44a;&#xff08;一&#xff09;3956. 截断数组 &#x1f333;Time Limit Exceeded &a…

如何用python代码,更改照片尺寸,以及更换照片底色

前言 python浅浅替代ps&#xff1f;如何用代码来p证件照并且更换底色&#xff1f; 唉&#xff0c;有个小姐姐给我扔了张照片&#xff0c;叫我帮忙给她搞成证件照的尺寸还得换底色&#xff0c;她说自己忙的很 可惜电脑上没有ps只有pycharm&#xff0c;没得办法只能来试试看代…

没有关系的话,那就去建立关系吧

今天给大家分享一道链表的好题--链表的深度拷贝&#xff0c;学会这道题&#xff0c;你的链表就可以达到优秀的水平了。力扣 先来理解一下题目意思&#xff0c;即建立一个新的单向链表&#xff0c;里面每个结点的值与对应的原链表相同&#xff0c;并且random指针也要指向新链表中…

vite基础使用及相关配置

前言 这篇文章主要是记录前段时间公司里以vite构建的一个小项目&#xff08;前端界面不多&#xff0c;主要功能及相关配置是在后端&#xff09;&#xff0c;挺简单的几个小页面。 说到vite&#xff0c;之前虽然都有学习了解及demo尝试&#xff0c;但因为业务等其他各方面因素也…

uniapp开发APP从开发到上架全过程(一)

前端时间受朋友委托帮他开发了一款APP&#xff0c;综合考虑了下&#xff0c;没有上原生&#xff0c;使用了uniapp这一套技术栈来进行开发 uniapp是dcloud推出的一套跨端前端解决方案&#xff0c;可以通过一套代码生成小程序、安卓、IOS、H5等代码&#xff0c;对于中小项目来说…

vue通知提醒消息

目录 前言 一、Notification 二、Notification引用 1.全局引用 2.单独引用 三、参数说明 四、简单案例 五、项目实战 1、定义全局Notification。 2、Websocket实时接收通知。 3、消息通知 前言 最近有个项目需求就是在客户端的右上角要实时展示提醒消息&#xff0c;下…

vue3使用tinymce

1、安装相关依赖 npm install tinymce -S npm install tinymce/tinymce-vue -S2、下载中文包 地址 https://www.tiny.cloud/get-tiny/language-packages/ 3. 引入皮肤和汉化包 在项目public文件夹下新建tinymce文件夹&#xff0c; 将下载的汉化包解压到此文件夹 然后在node…

js延迟加载的六种方式

1. defer 属性 HTML 4.01 为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性&#xff0c;等于告诉浏览器立即下载&#xff0c;但延迟执行标签定义了defer属性。 用途&#xff1a;表明脚本在执行时不会影响页面的构造。也就是说&#xff0c;脚本会…

论文阅读笔记《Nctr: Neighborhood Consensus Transformer for Feature Matching》

核心思想 本文提出一种融合邻域一致性的Transfomer结构来实现特征点的匹配&#xff08;NCTR&#xff09;。整个的实现流程和思想与SuperGlue相似&#xff0c;改进点在于考虑到了邻域一致性。邻域一致性在许多的传统图像匹配和图匹配任务中都有应用&#xff0c;他基于一个很重要…

【VUE前进之路】使用数据代理,计算属性与监视属性的妙用

1.数据代理 1.1什么是数据代理 通过一个对象代理对另一个对象中属性的操作&#xff08;读/写&#xff09; 1.Vue中的数据代理&#xff1a;通过vm对象来代理data对象中属性的操作&#xff08;读/写&#xff09; 2.Vue中数据代理的好处:更加方便的操作data中的数据 3.基本原理:…

ESLint 配置入门

大家好&#xff0c;我是前端西瓜哥&#xff0c;今天带大家了解 ESLint 的配置项。 ESLint 是一款检查 JavaScript 程序是否符合特定的规则的工具。比如字符串用单引号还是双引号&#xff0c;tab 缩进用 2 个空格还是 4 个空格还是其他&#xff0c;这些都可以用 ESLint 来规定。…