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

2024-05-29 05:28
文章标签 程序 功能 微信 定位 14 地理

本文主要是介绍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

这篇关于14.微信小程序之地理定位功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1012765。

相关文章

W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟 开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚 第一站：海量资源，应有尽有 走进“智听
阅读更多...
三国地理揭秘：为何北伐之路如此艰难，为何诸葛亮无法攻克陇右小城？

三国地理揭秘：为何北伐之路如此艰难，为何诸葛亮无法攻克陇右小城？

俗话说:天时不如地利，不是随便说说，诸葛亮六出祁山，连关中陇右的几座小城都攻不下来，行军山高路险，无法携带和建造攻城器械，是最难的，所以在汉中，无论从哪一方进攻，防守方都是一夫当关，万夫莫开；再加上千里运粮，根本不需要打，司马懿只需要坚守城池拼消耗就能不战而屈人之兵。 另一边，洛阳的虎牢关，一旦突破，洛阳就无险可守，这样的进军路线，才是顺势而为的用兵之道。 读历史的时候我们常常看到某一方势
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
业务中14个需要进行A/B测试的时刻[信息图]

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中，我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试，如何有效地规划和启动测试，如何评估测试是否成功，您应该关注哪些指标，多年来我们发现的常见错误等等。 什么是A/B测试？ A/B测试（有时称为“分割测试”）是一种实验类型，其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体，以查看哪一种效果最好。 本质上，A/B测
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2