14.微信小程序之地理定位功能

目录

1.地理定位介绍

 1.1 申请开通

1.2 使用方法

2.拒绝授权后的解决方案  

3.开通腾讯位置服务

4.LBS 逆地址解析

1.地理定位介绍

小程序地理定位是指通过小程序开发平台提供的 API，来获取用户的地理位置信息。用户在使用小程序时，可以授权小程序获取自己的地理位置信息

  1. wx.getLocation() ：获取当前的地理位置

  2. wx.chooseLocation()：打开地图选择位置  

 1.1 申请开通

暂时只对部分类目的小程序开放，需要先通过类目审核，然后在小程序管理后台，「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

1.2 使用方法

  1. 在 app.json 中配置 requiredPrivateInfos 进行声明启用

  2. 在调用 wx.getLocation() 时需要在 app.json 配置 permission字段，同时使用 scope.userLocation 声明收集用户选择的位置信息的目的，wx.chooseLocation() 接口不需要配置该字段，可以直接进行调用

  3. 在配置好以后，调用 wx.getLocation() 和 wx.chooseLocation() 接口

在 app.json 中进行配置

{"requiredPrivateInfos": ["getLocation","chooseLocation"],"permission": {"scope.userLocation": {"desc": "获取用户位置信息用于填写收货地址"}}
}

参考文档：

  1. 地理位置接口新增与相关流程调整

  2. permission 字段说明

getLocation 使用 ：

// 地理定位
async onLocation() {// 获取 纬度 、精度const { latitude, longitude } = await wx.getLocation()console.log(location)
}

chooseLocation 使用：

// 地理定位
async onLocation() {// 打开地图选择位置，获取 纬度 、精度const { latitude, longitude }  = await wx.chooseLocation()console.log(res)
}


2.拒绝授权后的解决方案  

在调用 wx.getLocation() 获取用地理位置时，如果用户选择拒绝授权，代码会直接抛出错误。

在拒绝授权以后，再次调用 wx.getLocation() 时，就不会在弹窗询问用户是否允许授权。

接下来，就需要优化授权的流程：

 代码如下：

方法里面的提示框，比如：wx.modal,wx.toast是自己在原生的基础上进一步封装的，自己用的时候可以用原生的即可，以自身项目业务为准，以下代码仅做参考：

// 获取用户地理位置信息
async onLocation() {// 调用 getSetting 方法获取用户所有的授权信息// 返回的 authSetting 包含小程序已向小程序申请过的权限已经授权结果(true、false)const { authSetting } = await wx.getSetting()console.log(authSetting)// scope.userLocation 是否已经授权获取地理位置的信息// 如果之前没有申请过返回 undefined，需要调用 getLocation// 如果之前同意了授权，返回 true，需要调用 getLocation// 如果之前拒绝了授权，返回 false，需要用户手动进行授权// 等于 true，或者不等于 undefined，说明需要进行授权// const isAuth =//   authSetting['scope.userLocation'] ||//   authSetting['scope.userLocation'] === undefined// 为了避免冗余的条件判断，使用 !! 把代码进行优化const isAuth = !!authSetting['scope.userLocation']if (!isAuth) {// 弹窗询问用户是否进行授权const modalRes = await wx.modal({title: '授权提示',content: '需要需要您的地理位置信息，请确认授权'})// 如果用户点击了取消，说明用户拒绝了授权，给用户提示if (!modalRes) return wx.toast({ title: '您拒绝了授权' })// 如果用户点击了确定，调用 wx.openSetting 打开微信客户端小程序授权页面// 并返回授权以后的结果const { authSetting } = await wx.openSetting()// 如果用户没有更新授权信息，提示没有更新授权if (!authSetting['scope.userLocation'])return wx.toast({ title: '授权失败！' })try {// 如果用户更新授权信息，则调用 getLocation 获取用户地理位置信息const locationRes = await wx.getLocation()// 打印地理位置信息console.log(locationRes)} catch (err) {console.log(err)}} else {try {// 如果是第一次调用 getLocation 或者之前授权过// 直接调用 getLocation 获取用户信息即可const locationRes = await wx.getLocation()console.log(locationRes)} catch (error) {wx.toast({ title: '您拒绝授权获取地址位置' })}}
}

3.开通腾讯位置服务

使用wx.chooseLocation()能够很方便的让用户来选择地理位置，但是wx.chooseLocation()返回的数据并没有包含省市区、省市区编码数据。

 这时候我们可以使用 腾讯位置服务 将返回的经度、纬度进行逆地址解析，转换成详细地址。

腾讯位置服务专为小程序开发提供了 JavaScript SDK，方便开发者在小程序中可以使用腾讯地图服务。

使用腾讯位置服务可以很方便的让开发者实现地址解析、逆地址解析等功能。

使用步骤：

  1. 申请开发者密钥（key）：申请密钥

  2. 开通 webserviceAPI 服务：控制台 → 应用管理→我的应用 → 添加 key →勾选 WebServiceAPI →保存

  3. 下载微信小程序 JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

  4. 安全域名设置

    • 在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置 request 合法域名

    • 添加 https://apis.map.qq.com

详细步骤：

1.申请密钥：密钥申请，微信扫码进行登录，选择绑定已有账号、或者注册新账号 (需要绑定手机、验证邮箱)

2. 开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存→ 创建完成

 3.下载微信小程序 JavaScriptSDK v1.2，下载将 .js 文件放到小程序的 libs 目录下  

4.安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com，或者点击微信开发者工具中的暂时不校验域名

4.LBS 逆地址解析

LBS 逆地址解析是指通过地理坐标查找对应位置的详细地址信息。LBS 是 Location-Based Services 的缩写，翻译为中文就是基于地理位置的服务。

对于 LBS 逆地址解析，通常是输入地理坐标（经度和纬度），系统会返回地理位置的具体地址，如国家、省份、城市、街道、建筑等信息。

比如说，你有一个经纬度为（114.21892734521,29.575429778924）的坐标，通过 LBS 逆地址解析，你可以得到这个坐标对应的实际地址，可能是 "中国湖北省武汉市XXX区XXX路XXX号"。

使用步骤：

  1. 在项目中引入 SDK 核心类（上面已经下载的微信小程序JavaScriptSDK）

// var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
//这个地址看自己项目，一般是在工作目录的根目录下建libs文件夹，哪里需要在哪引入即可
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'

  1. 在 onLoad 中实例化 API 核心类，同时配置创建的 key

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
import QQMapWX from '../../../../../libs/qqmap-wx-jssdk.min'Page({onLoad: function () {// 实例化API核心类，把实例挂载到this上，方便其他方法中使用this.qqmapsdk = new QQMapWX({key: '申请的key'})}// coding...   
}

  1. 使用实例方法 reverseGeocoder 方法进行逆地址解析，将提供的坐标转换为详细的地址位置信息 

// LBS 地址逆解析
// 地理定位
async onLocation() {// 获取 纬度 、精度// const { latitude, longitude } = await wx.getLocation()// console.log(location)// 获取经、纬度、name用户搜索的地点名称let { latitude, longitude, name } = await wx.chooseLocation()// 使用 reverseGeocoder 方法进行逆地址解析this.qqmapsdk.reverseGeocoder({// 传入经、纬度location: {latitude,longitude},// 逆地址解析成功后执行success: (res) => {// 获取选择的const { street_number } = res.result.address_component// province 省  city 市  district 区const {province, // 省city, // 市district, // 区adcode, // 行政区划代码city_code, // 城市代码，由国家码+行政区划代码（提出城市级别）组合而来，总共为9位nation_code // 国家代码} = res.result.ad_infothis.setData({// 省级: 前两位有值，后4位置0，如，河北省: 130000provinceCode: adcode.replace(adcode.substring(2, 6), '0000'),provinceName: province,// 市前面多个国家代码，需要进行截取cityCode: city_code.slice(nation_code.length),cityName: city,// 东莞市、中山市、修州市、嘉关市 因其下无区县级，districtCode: district && adcode,districtName: district,// 详细地址address: name,fullAddress: [province, city, district, address].join('')})}})
}

注意事项：

逆地址解析解析初始用的时候发现解析不成功，需要配置接口的调用额度：

官方文档-基础示例：Hello World

官方文档-逆地址解析：reverseGeocoder

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【前端常见面试题整理】

【前端常见面试题整理】

开放性的题目 自我介绍 突出学习能力 我想换工作的主要原因是 介绍项目 平时是如何学习前端开发的 主要就是两个途径，一个是查阅官方文档，然后就是在网上查找技术资料或者视频去学习。平时没事的时候也会看看github，同时关注一些社区和IT网…
阅读更多...
医疗小程序源码SpringBoot2.X + Vue + UniAPP全栈开发

医疗小程序源码SpringBoot2.X + Vue + UniAPP全栈开发

源码说明： 看到好多坛友都在求SpringBoot2.X Vue UniAPP，全栈开发医疗小程序 – 带源码课件，我看了一下，要么链接过期，要么课件有压缩密码。 特意整理了一份分享给大家，个人认为还是比较全面的。 希望…
阅读更多...
【数据结构】-- 栈

【数据结构】-- 栈

栈 引入： 一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶，另一端称为栈底。栈中的元素遵循先进后出的原则，先入栈的元素总是先后出栈。 压栈：栈的插入操作叫…
阅读更多...
04--SpringBoot热部署与日志

04--SpringBoot热部署与日志

1、热部署 1.1 引言 为了进一步提高开发效率，SpringBoot为我们提供了全部项目热部署，日后在开发过程中修改了部分代码或者相关配置文件之后，不需要再重启服务使其生效。在项目中开启了全局热部署之后，只需要在修改之后等待几秒钟…
阅读更多...
Python内置数据类型详解：从基础到进阶

Python内置数据类型详解：从基础到进阶

Python内置数据类型详解：从基础到进阶 在Python编程中，数据类型是构建程序的基础。Python提供了多种内置数据类型，用于存储不同类型的数据。这些数据类型不仅易于使用，而且功能强大，能够满足各种编程需求。本文将详细介绍Python中的内置数据类型，包括它们的特点、用法以…
阅读更多...
ARM GIC 和NVIC的区别

ARM GIC 和NVIC的区别

ARM GIC（Generic Interrupt Controller）和NVIC（Nested Vectored Interrupt Controller）是两种不同的中断控制器，它们在ARM架构中扮演着重要的角色，但各自有不同的设计和应用场景。 ARM GIC： G…
阅读更多...
广东省保健食品行业协会批复成为“世界酒中国菜”活动指导单位

广东省保健食品行业协会批复成为“世界酒中国菜”活动指导单位

广东省保健食品行业协会正式批复成为“世界酒中国菜”系列活动指导单位，共促餐饮文化交流发展 近日，广东省保健食品行业协会正式批复荐酒师国际认证（广州）有限公司，成为备受瞩目的“世界酒中国菜”系列活动的指导单位…
阅读更多...
a+bi vs a+bj, Mathematics vs. Engineering.

a+bi vs a+bj, Mathematics vs. Engineering.

In Python (and many other programming languages), the use of “j” instead of “i” for representing the imaginary unit in complex numbers is a convention borrowed from electrical engineering and physics. Let me explain why: Historical Context: The use of …
阅读更多...
填补领域空白！TerDiT：首次探索大规模DiT模型量化问题（MMLab出品）

填补领域空白！TerDiT：首次探索大规模DiT模型量化问题（MMLab出品）

论文链接：https://arxiv.org/pdf/2405.14854 项目链接：https://github.com/Lucky-Lance/TerDiT 最近在大规模预训练的文本到图像扩散模型方面的发展显著提高了高保真图像的生成能力，特别是基于transformer架构的扩散模型（DiTs&a…
阅读更多...
奈飞CEO最新访谈：抢走你饭碗的不是AI，而是能熟练使用AI的人

奈飞CEO最新访谈：抢走你饭碗的不是AI，而是能熟练使用AI的人

大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通人变强的“外挂”，所以创建了“AI信息Gap”这个公众号，专注于分享AI全维度知识…
阅读更多...
新书推荐：7.5 goto、break、continue语句

新书推荐：7.5 goto、break、continue语句

本节必须掌握的知识点： 示例二十六 代码分析 汇编解析 示例二十七 代码分析 汇编解析 7.5.1 示例二十六 ■goto语句：无条件转移语句。 语法格式： goto label; label : 代码; ●语法解析： 执行到goto语句时，则无…
阅读更多...
算法提高之64位整数乘法

算法提高之64位整数乘法

算法提高之64位整数乘法 核心思想&#xff1a;位运算 和快速幂相似 预处理1*a 2*a 4*a …的值 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;LL qadd(LL a,LL b,LL p){LL res 0;while(b){if(b &…
阅读更多...
Jetpack架构组件_1.基本知识

Jetpack架构组件_1.基本知识

1.什么是Jetpack&#xff1f; Jetpack 是一个由多个库组成的套件&#xff0c;可帮助开发者遵循最佳做法、减少样板代码并编写可在各种 Android 版本和设备中一致运行的代码&#xff0c;让开发者可将精力集中于真正重要的编码工作。Jetpack 包含一系列 Android 库&#xff0c;它…
阅读更多...
js Dom基础

js Dom基础

获取元素 1、getElementById() 通过id属性获取一个元素节点对象 <div id"div1"></div> <script> var div1 document.getElementById(div1) </script> 2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象 这个方法会给我们返…
阅读更多...
pcdn服务器应该怎么配？

pcdn服务器应该怎么配？

要配置PCDN&#xff08;Private Content Delivery Network&#xff09;服务器&#xff0c;可以按照以下步骤进行&#xff1a; 需求分析&#xff1a;明确业务需求&#xff0c;确定所需的CDN功能和性能参数。这包括预期的流量、负载、内容类型、目标用户群体等。 硬件选择&#…
阅读更多...
VCRUNTIME140_1.dll丢失是怎么回事？vcruntime140_1.dll无法继续执行代码的处理方法

VCRUNTIME140_1.dll丢失是怎么回事？vcruntime140_1.dll无法继续执行代码的处理方法

VCRUNTIME140_1.dll丢失是怎么回事&#xff1f;问出这样的问题的人&#xff0c;一般是遇到vcruntime140_1.dll无法继续执行代码的问题了&#xff0c;找不到VCRUNTIME140_1.dll文件&#xff0c;那么程序就肯定是启动不了的&#xff0c;程序的启动是需要VCRUNTIME140_1.dll文件的…
阅读更多...
Java进阶学习笔记1——课程介绍

Java进阶学习笔记1——课程介绍

课程适合学习的人员&#xff1a; 1&#xff09;具备一定java基础的人员&#xff1b; 2&#xff09;想深刻体会Java编程思想&#xff0c;成为大牛的人员&#xff1b; 学完有什么收获&#xff1f; 1&#xff09;掌握完整的Java基础技术体系&#xff1b; 2&#xff09;极强的编…
阅读更多...
git常用命令使用

git常用命令使用

1 查看分支 git branch 查看本地分支&#xff08;*号绿色高亮就是所在分支&#xff09;git branch -a 查看远程分支 2 分支常用命令 git branch xxx&#xff1a;新建分支git checkout xxx&#xff1a;切换分支git checkout -b xxx&#xff1a;新建分支并切换到该分支&#x…
阅读更多...
可执行文件以及其加载过程

可执行文件以及其加载过程

在计算机系统中&#xff0c;可执行文件是指包含机器代码的文件&#xff0c;计算机可以直接执行这些代码以运行特定的任务或程序。不同的操作系统对可执行文件有不同的定义和处理方式。本文将探讨常见操作系统中的可执行文件格式及其加载过程&#xff0c;特别是以ELF&#xff08…
阅读更多...
行为设计模式之状态模式

行为设计模式之状态模式

文章目录 概述定义结构图 2.代码示例小结 概述 定义 状态模式(state pattern)的定义: 允许一个对象在其内部状态改变时改变它的行为。 对象看起来似乎修改了它的类。 状态模式就是用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.。状态模式将一个对象的状态…
阅读更多...
最新文章

Copyright @ 2022~2023