uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息

uniapp中地图定位功能实现的几种方案 缺点:关闭定位后延时很久,无法控制定位延迟时间,流程卡顿。获取手机定位权限方法不支持h5。实现思路:uni.getLocation获取经纬度后调用接口获取城市名。3.浏览器内置对象navigator.geolocation。缺点:仅支持https协议链接,http协议下无法正常定位。1.uniapp自带uni.getLocation。缺点:dom拼接百度map降低性能,初始化时慢3秒。优点:比较稳健,功能支持群面。优点:方便快捷,直接调用。 阅读详情

前言:我好像隐隐约约的记得前几个月用uniapp开发微信小程序使用API接口uni.getLocation好像能获取到城市信息,但是现在只能获取到经度、纬度了,然后去看了一下uniapp官网发现仅App端支持......好吧!那可能是我记错了,也没关系,竟然能获取到经度和纬度那我们就使用第三方接口来处理。去网上找了一下腾讯位置服务可以为我们提供一个叫逆地址解析接口刚好可以满足我们的需求,那就用这个来实现吧!!

1.配置全局属性

在获取位置前我们需要在manifest.json文件配置一下requiredPrivateInfos和permission全局属性才可以正常的使用。 

配置permission属性:点开manifest.json选择微信小程序配置勾选位置接口在描述里面填上描述文字然后在源码视图里面查看就会多出图二中标注二的内容配置。

配置requiredPrivateInfos属性:在mp-weixin里面加上requiredPrivateInfos属性配置上你需要使用的接口名字就好了,这里我只配置了getLocation。

f63aa78c93ba4ad0a7944e9c4f5f90f7.png

3099f72bb18d4bf2967d5164bc4b3c51.png

2.配置腾讯位置服务得到对应的Key和js文件

具体的配置步骤在下方图片你们看着这个官网来弄,配置好就会得到对应的Key再把下载的js文件放在项目的静态文件夹里。

f045f4a65e584b35a3717e7ec1871713.png

 3.获取位置信息

获取位置信息的方法步骤:

  1. 引入你在腾讯位置服务下载好的js文件
  2. 使用uni.authorize()发起授权申请
  3. uni.getLocation()接口得到位置对应的经纬度
  4. 把得到的经纬度传给逆地址解析接口

 按照上面的步骤写好代码以后持行会返回包含城市信息的对象然后我们就可以使用了,具体的代码如下:

// 导入腾讯位置服务js
import QQMapwx from '../../common/qqmap-wx-jssdk1.1/qqmap-wx-jssdk.min.js'

// 获取位置信息
getLocation() {
	var _this = this
	uni.authorize({
		scope: 'scope.userLocation',
		success() {
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy: true,
				success: function(res) {
					console.log(res)
					// 腾讯位置服务
					const qqmapsdk = new QQMapwx({
				    	key: '你得到的Key'
					});
					qqmapsdk.reverseGeocoder({
						// 通过纬度 经度来查询地址
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: (re) => {
							console.log(re)  // 城市信息
							_this.location = re.result.ad_info.city
						}
					})
				},
				fail(res) {
					uni.showToast({
						title: '获取失败',
						icon: 'error',
						duration: 2000
					})
					console.log(res)
				}
			})
		}
	})
}

有的小伙伴就觉得使用第三方的接口会不会收钱呀,这个我们可以去腾讯位置服务官网看看介绍就知道了,下面就是官网的说明,看我标注的地方写道免费配额大家应该就知道是不是免费了。我们使用的是逆地址解析,个人开发者每日可免费调用10000次,企业开发者每日可以免费3000000次完全是够用的,除非你为大企业定制一天需要用到超过3000000次定位的小程序,需要额外的去申请

47a6571089e94703aa38db00cc90744e.png

没关注的小伙伴点点关注!!!!

【填坑】uniapp使用getLocation获取位置 manifest中配置【App模块配置】中的【Geolocation】配置和【Maps】配置,我统一使用的高德。依然使用type=wgs84,获取完经纬度后使用函数转换为gcj02,这样操作后会发现,竟然比安卓gcj02真机调试中获取的位置还要精准。于是使用type=gcj02,真机调试结果:android可以精准定位,ios报错-1504,已经提bug目前官方没有给出明确解释。使用type=wgs84时虽然两端真机都可以返回位置,但是调试发现定位不准,距离偏差几百米。 阅读详情

相关推荐

uniapp小程序通过高德地图获取城市信息

首先我们需要获取当前位置的经纬度,通过经纬度来转化成当前城市的信息我这里用到了uni的api“uni.getLoaction”我们在使用“uni.getLoaction”的时候需要先在小程序里进行配置。肯定很多新入手小程序的小伙伴对于小程序定位获取不了城市信息的事情烦恼吧,今天在这里由我来给小伙伴们讲解一下如何编写代码以及配置小程序获取城市信息吧。逆地理解析需要借助三方的sdk,所以我们需要在代码里引入高德的sdk,前往高德开放平台下载sdk。申请完成之后我们来看代码。开通好之后我们就能通过。

weixin_68015034的博客 1265

uniapp uni.getLocation获取详细的地址信息

uniapp uni.getLocation获取详细的地址信息

lovewangyage的博客 7784

uni-app(微信小程序)获取当前位置uni.getLocation

1、微信公众平台 开发 开发管理。3、下载腾讯地图插件并引入到文件中。2、开通之后到项目文件。

cyj0919的博客 4832

uniapp使用uni.getLocation获取手机定位

和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。注意:默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于。(1)封装了一下uni.getLocation,放在工具函数文件中。(3)坐标系的转换:这里把gcj02坐标转为百度坐标。,需使用手机进行获取。

XiaoSen125_的博客 8755

uniapp|微信小程序获取当前城市名称--逆地址解析

uniapp/微信小程序获取当前城市名称逆地址解析,uniapp城市名称逆地址解析,坐标转换城市名称,坐标转换地址,地址解析,获取坐标地址信息,获取详细地址,获取地址名称,显示地址,显示地址详细地址信息,坐标逆地址解析,uni.getLocation,wx.getLocation,uniapp获取坐标,微信小程序获取坐标,小程序逆地址解析,腾讯地图逆地址解析

江拥羡橙的博客 1万+

手把手教你用LTspice仿真TVS二极管:从选型验证到波形分析全流程

本文详细介绍了如何使用LTspice仿真TVS二极管,从选型验证到波形分析的全流程。通过搭建仿真环境、核心参数验证和系统级防护策略,帮助工程师低成本评估TVS性能,优化电路设计。特别适用于电源设计和接口防护领域,提升工作效率和设计准确性。

weixin_29234239的博客 646

uniapp开发微信小程序笔记14-获取当前定位城市(uni.getLocation、腾讯地图的详细使用步骤)

经常有功能需要获取用户当前定位城市,本文介绍了uni.getLocation的使用,但是因为该方法在小程序中只能获取到经纬度,随而介绍了如何使用腾讯地图来获取当前用户的位置信息(国家省市区街)

wzy_PROTEIN的博客 1万+

GD32F303开发实战(一):从零搭建MDK工程与时钟配置详解

本文详细介绍了如何从零开始为GD32F303微控制器搭建一个清晰、可维护的MDK工程模板。内容涵盖开发环境准备、工程目录结构规划、文件分组管理、关键工程配置,并重点解析了时钟树原理,手把手指导配置108MHz系统时钟。通过实战步骤与常见问题排查,帮助开发者构建一个稳定可靠的开发基础,便于后续功能扩展。

weixin_29174141的博客 271

uni小程序通过经纬度获取详细位置,将经纬度转换为城市序列码,uniapp lb-picker省市区级联的使用

文章目录一、背景二、准备实现2.1 第一个需求(获取经纬度)2.2 第二个需求(省市区级联)2.2.1 省市区级联插件(uniapp lb-picker选择器)2.2.2 省市区级联使用 一、背景 1、项目开发中有这么一个需求,用户刚进入页面,获取用户当前的位置,匹配最近的教师(和后端进行配合,传入经纬度就好)。 2、同时要有关联省市区级联 3、根据用户的位置,关联到省市区级联上 二、准备 注意: 在做uni微信小程序定位时,需要先在 manifest.json中进行提前配置scope.userLocat

qq_38188228的博客 5453

ACM算法模板 · 一些常用的算法模板-模板合集(打比赛专用)

萌新常用的都在这了,本萌新的模板集。

张天枭の博客 5万+

【高级雷达感知与学习】 第十三章 可解释性与物理–感知融合(Physics-Informed ML)

本文提出了一种面向雷达感知的物理约束学习方法,将雷达物理先验(RCS、SNR、距离衰减)嵌入神经网络,解决纯数据驱动模型的样本效率低、泛化能力弱和决策不可信问题。通过三种融合范式(混合建模、物理正则化、PINNs)实现机理与数据协同建模,并设计了物理引导显著图解决雷达可解释性语义错位问题。实验表明,物理约束可提升40%样本效率,增强低信噪比场景鲁棒性。代码实现包含物理正则化损失、可解释性分析和消融实验,为雷达感知系统提供了可迁移的工程范本。

VectorShift的博客 186

app uniapp 获取位置_uni-app获取当前位置

uniapp获取当前城市:uni.getLocation()获取当前的地理位置、速度。 在微信小程序中,当用户离开应用后,此接口无法调用,除非申请后台持续定位权限;当用户点击“显示在聊天顶部”时,此接口可继续调用。例:uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + res.longit...

weixin_39782355的博客 3328

【OS】AUTOSAR架构下MCAL Modules软件分区问题分析

AUTOSAR架构下MCAL Modules软件分区问题分析

qq_36056498的博客 939

uniapp开发小程序根据经纬度获取定位城市名字

1. 前言 大家如果接触过微信小程序的都知道,涉及到一些用户敏感信息的操作(比如定位、访问个人信息等)都是需要用户授权的,我们平时使用小程序时可能也见到过进行某个操作之前弹出授权框的场景,需要用户手动授权后才能进行下一步操作。接下来文章简单介绍一下微信小程序中的授权机制,基本上都是参考自官方文档,大家也可以直接阅读官方文档,了解更详细的介绍。 2. 大体思路 1) 提前向用户发起授权请求uni.authorize,如果用户之前已经同意授权,不会出现弹窗,直接返回成功;如果用户之前拒绝了授权,此接口会直

铁锤妹妹的博客 4544

Altair HyperWorks软件二次开发:二次开发成果展示与报告撰写

HyperMesh Python API允许用户通过Python脚本控制HyperMesh的大部分功能,包括模型创建、修改和分析。它提供了丰富的函数库,可以处理节点、元素、材料属性、载荷和边界条件等。二次开发可以用于创建自定义工具,这些工具可以集成到HyperWorks中,提供特定的功能或简化复杂的操作。

kkchenjj的博客 1640

【NodeRed】node-red-contrib-opcua实现PLC读写

在之前的博文【Node-RED】node-red-contrib-opcua-server模块使用(1)中,我们介绍了用node-red-contrib-opcua-server模块实现OPCUA服务端的,以及二次开发的内容。本节博文中我们采用官方社区自带的node-red-contrib-opcua组件开展对OPCUA客户端的介绍,详细阐述用该组件中OpcUa-Client节点实现客户端对PLC的读写,以及实现过程中遇到的问题。由于官方社区中并没有找到该组件的介绍实例,这也是本博文编写的第1个原因。

weixin_48618536的博客 960

uniapp实现微信小程序用户实时位置定位并显示地图

目前,我们可以通过一些现成的api来实现此功能。下面我将介绍一下通过腾讯位置服务来实现此功能的具体操作流程。需将以上代码中的key,换成自己刚刚配置的key。进入到manifest.json文件中。

m0_58991732的博客 1万+

揭秘 C++ 性能优化的终极秘籍,让你面试时应答如流

VTune Amplifier 是英特尔开发的一款强大的性能分析工具,它可以深入分析应用程序在英特尔架构上的性能瓶颈。功能特点全面的分析视角:提供了多种分析模式,如热点分析、线程分析、内存分析等。热点分析模式能快速定位程序中最耗时的代码段;线程分析模式可帮助开发者了解多线程程序中线程的执行情况、同步开销等;内存分析模式则专注于内存访问的性能,包括缓存命中率、内存带宽使用等。硬件层面的洞察:能够深入到硬件层面,分析 CPU 的微架构指标,如指令级并行度、流水线停顿等。

大模型大数据攻城狮的专栏 1153

uniapp 微信小程序用户授权获取当前位置信息 腾讯地图

获取微信小程序的AppID 官方文档 https://lbs.qq.com/qqmap_wx_jssdk/index.html 在uni-app项目中的 manifest.json 文件中的微信小程序获取AppID 以及开启位置接口 获取腾讯位置服务的Key 搜索腾讯地图api进去并登录https://lbs.qq.com/ 下载sdk 下载微信小程序JavaScriptSDK ,也可以通过访问腾讯地图文档https://lbs.qq.com/qqmap_wx_jssdk/index.html查看教程

qq_40618664的博客 2888

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

uniapp开发微信小程序使用腾讯地图获取具体位置信息

uniapp可以通过uni.getLocation获取用户定位,但是获取到的定位没有中文地址,所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。

铁锤妹妹的博客 9643

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

uniapp 微信小程序获取当前位置 根据经纬度获取省市区

需求:uniapp开发的微信小程序首页需要显示城市名称 需要用到高德地图的逆地理编码 需要当前地理位置的经纬度 小程序的key值 uni.getLocation({ type: 'gcj02', //返回可以用于uni.openLocation的经纬度 success:(res)=>{ let that=this const latitude = res.latitude; const longitude = res.longitude; con

qq_40630924的博客 6080

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

uniapp微信获取位置,具体城市信息

我们在小程序以及app内经常会一进入就获取当前城市,只用uniapp的getlocation只能获取到经纬度,那么如何通过经纬度获取当前位置呢(文章中使用腾讯地图) 一.在项目的mainfest.json中找到配置位置的地方(小程序) 二.使用uni.getlocation方法获取到当前的经度以及纬度。 uni.getLocation({ success: (res) => { console.log(res); this.latitude=res.latitude

qq_44295667的博客 1387

uniapp开发微信小程序通过高德Api获取城市信息和天气信息

获取当前的地理位置、速度。在微信小程序中只能获取到当前的经纬度,无法获取到当前所在的城市信息。接下来我们通过使用高德地图提供的逆地理编码,通过经纬度拿到当前的城市信息。我们发现只能返回经纬度信息,并不会返回城市信息。这样我们就通过逆地理编码拿到了我们的城市信息。我们发现有只有app才支持geocode。接下来我们通过拿到的城市信息去获取天气信息。首先,我们先在控制台申请一个key。我们就可以获取当前的天气了。然后下载微信小程序插件。下载完成之后放入到项目中。通过uniapp提供的。看一下我们拿到的信息。

m0_65789515的博客 788

uniapp利用高德api接口将getLocation经纬度转化到省市区街道信息

微信的getLocation接口可以获取到用户的经纬度信息,但是没有办法拿到省市县街道信息,所以就需要用到高德的api接口将经纬度转换为省市县这种信息,在对接的时候,有两种方式可以对接这个接口,一个是使用高德的web服务,一个是微信小程序sdk,因为sdk会增加小程序的体积,所以我选择web服务。

3070

get request uni 参数_UniApp实战:动态数据(uni.request封装、uni.getLocation获取定位等)...

通过本章节你能学到那些?1、Uni-App API调用(网络请求、获取位置等)2、获取高德开放平台API - 天气查询3、Uni-App 引用npm第三方库4、Uni-App + Vuex 数据持久化下面我们来具体看看Uni-App API调用(网络请求、获取位置等)一、uni.request封装成Promiseuni.request(OBJECT)OBJECT对象描述:1、根目录下新建 comm...

weixin_39641738的博客 2189

uniapp开发微信小程序根据经纬度获取定位城市名字

uniapp开发微信小程序根据经纬度获取定位城市名字

qq_41737353的博客 1340
上一篇: Navicat Premium 16修改MYSQL的密码
下一篇: webStorm不同的git分支代码对比及合并
_Admin*
博客等级 码龄4年 132粉丝 9原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值