微信小程序获取地理位置最佳实现

article/2025/5/14 9:51:34

定位

微信小程序获取用户当前位置需要用户的授权,可以直接调用 wx.getLocation,微信会弹出授权提示,如果用户曾经拒绝过授权则不会弹窗。

根据微信官方文档:

授权

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个
scope 之后,其对应的所有接口都可以直接使用。

此类接口调用时:

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态。

打开设置界面

用户可以在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态。

开发者可以调用 wx.openSetting 打开设置界面,引导用户开启授权。

比较好的方案是:先获取用户设置信息 wx.getSetting,判断用户位置授权设置,如果没有授权则弹出授权提示,如果曾经拒绝授权则打开设置页面,方便用户修改授权设置,如果用户拒绝授权则给一个默认经纬度。

locationUtil.js

var util = require('util.js');function getLocation() {return new Promise(function (resolve, reject) {wx.getSetting({success: (res) => {//console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true    表示 地理位置授权if (res.authSetting['scope.userLocation'] === false) {wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000});getCurrentLocation(resolve, reject);} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,调用wx.getLocation的APIgetCurrentLocation(resolve, reject);} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000});getCurrentLocation(resolve, reject);}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {wx.authorize({scope: 'scope.userLocation',success() { //用户同意开启授权//进行地理位置授权完成后的逻辑操作getCurrentLocation(resolve, reject);},fail(res) { //用户拒绝开启授权wx.hideLoading()wx.showToast({title: '授权失败',icon: 'none',duration: 2000});getCurrentLocation(resolve, reject);}})} else if (res.authSetting['scope.userLocation'] == true) {getCurrentLocation(resolve, reject);}}});});
}function getCurrentLocation(resolve, reject) {wx.getLocation({type: 'gcj02',success: function (res) {var longitude = res.longitude //经度var latitude = res.latitude //纬度wx.setStorageSync("longitude", longitude);wx.setStorageSync("latitude", latitude);if (resolve) {resolve(res);}},fail: function (res) { //用户授权获取地理位置失败,默认深圳龙岗区res = {longitude:114.24779,latitude:22.71991};if (resolve) {resolve(res);}}})  
}// 打开地图选择位置
function chooseLocation() {var that = this;return new Promise(function (resolve, reject) {that.getLocation().then(res => {if (res) {wx.chooseLocation({latitude: res.latitude,longitude: res.longitude,success: function (addressInfo) {resolve(addressInfo);},fail: function (res) {reject(res);}});} else {util.showMsg('定位失败');}});});
}/*** 导出*/
module.exports = {getLocation: getLocation,chooseLocation: chooseLocation,
}

util.js

function showMsg(msg, icon) {if (isBlank(icon)) {icon = "none";}wx.showToast({title: msg,icon: icon,duration: 2000})
}

用法:

// 定位当前经纬度
locationUtil.getLocation().then(res => {var params = {lng:res.longitude,lat:res.latitude};console.log(params.lng);
});// 打开地图选择位置
locationUtil.chooseLocation().then(res => {var params = {lng:res.longitude,lat:res.latitude};console.log(params.lng);
});

声明

获取地理位置需要在app.json中声明用途:

  "permission": {"scope.userLocation": {"desc": "你的位置信息将用于查询附近的人等功能"}},

打开地图选择位置效果图:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/Pc3vVl9q.shtml

相关文章

微信小程序逆向分析

文章目录 微信小程序逆向分析行为监控分析文件特征wxapkg解密思路重新监控解密分析尾部部分解密解密例程分析找到xorKey 首部1024字节解密解密例程分析AES_Key生成例程分析分组模式以及iv 微信小程序逆向分析 WeChatAppEx.exe 版本:2.0.6609.4 以融智云考学生端为…

小程序发展简史

2017年元月9日微信正式推出第一个版本的小程序以来,大众对小程序经历了“热情->失望->质疑->回归->井喷爆发”的几个阶段。无疑小程序是个划时代的应用。它免安装,轻巧、免卸载、多入口的特性,从一诞生并自带光环。目前大分部主流…

微信小程序复习题

文章目录 填空题选择题判断题分析题(20)分析代码显示效果 页面设计题(40) 填空题 微信小程序创始人是 张小龙 ,英文缩写 Mini Program小程序是一种无需下载和无需安装即可使用的应用,它实现了应用“ 触手可…

小程序获取附近IBeacon设备

实现逻辑: 该功能实现需要使用以下API: wx.startBeaconDiscovery(OBJECT):开始搜索附近的iBeacon设备 wx.stopBeaconDiscovery(OBJECT):停止搜索附近的iBeacon设备 wx.onBeaconUpdate(CALLBACK):监听 iBeacon 设备…

微信小程序面试题大全

1、简述微信小程序的相关文件类型? WXML 搭建页面的结构WXSS 页面样式文件js 逻辑处理,网络请求json 配置当前页面标题和引入组件等app.js 可以在里边监听生命周期函数、声明全局变量app.json 小程序的全局配置(页面路径、网络超时时间、底部…

微信小程序常见问题汇总

1、如何避免微信小程序中 app.js中 onshow事件的n次触发的问题? 问题 在开发中,遇到了一个小难题,就是app.js中 onshow事件总是会因调用其它API而触发,例如:wx.chooseImage,wx.makephonecall、wx. previewImage等。 解决办法 目…

怪兽充电小程序

第一首先看中心点上有个小图标 实现方式&#xff0c;我们可以使用map 结合一个图片覆盖物实现&#xff0c;在结合定位 <map id"myMap" show-locationenable-poienable-building :latitude"latitude":longitude"longitude":markers"marke…

扫盲篇 | 你真的懂附近的小程序吗?

“附近的小程序”功能是指用户进入微信小程序界面以后,可以直接看到所在地周围5公里左右的所有“小程序”。 包括实体店,服务店,商场等,微信小程序上线之初就曾提及该功能,而它几乎成了零售领域最期待的一项功能。 所以许多行业人士指出,小程序会给零售行业发展带来巨大…

有哪些常见的微信小程序推广引流方法?

如何对小程序进行推广引流。只有如此&#xff0c;才能为小程序获取到更多忠实用户&#xff0c;使小程序实现更大的价值。今天就为大家介绍一下微信小程序常见有效的推广方式。 1、附近的小程序&#xff08;免费&#xff09; 在小程序后台&#xff0c;开通“附近的小程序”&am…

微信附近的人小程序怎么开(开通附近小程序的方法)

1、进入微信公众号平台进入&#xff0c;输入小程序账号和密码&#xff0c;点击登录&#xff1b; 2、在左侧菜单中找到“附近的小程序”&#xff0c;点击开通。&#xff08;个体小程序不支持开通&#xff09; 3、验证管理员身份后按照要求填写资料&#xff0c;点击定位&#xf…

C语言/C++初学 问题

编程及C/C初学者 FAQ 本文原为本人在论坛所发若干帖&#xff0c;意在集中解决新手学习C/C语言时将遭遇到的各类问题&#xff0c;网友反馈情况良好&#xff0c;集合修订后作为个人作品贴于此处。 本贴主要分析概念原理和解决方案&#xff0c;不讨论具体程序语法&#xff0c;立足…

matlab2c使用c++实现matlab函数系列教程-randint函数

全栈工程师开发手册 &#xff08;作者&#xff1a;栾鹏&#xff09; matlab2c动态链接库下载 matlab库函数大全 matlab2c基础教程 matlab2c开发全解教程 matlab2c调用方法&#xff1a; 1、下载动态链接库 2、将Matlab2c.dll拷贝到exe同目录下 3、将Matlab2c.h、Matlab2c.lib放…

MATLAB只randint函数

srandint(M,N,range); 生成MxN的矩阵&#xff0c;矩阵中元素的取值为小于range的整数。 M4; N3; range3; srandint(M,N,range) 注意&#xff1a; randi函数生成元素取值为1&#xff1a;M的N*range的矩阵。

python中randint_python中randint函数的用法是什么?_后端开发

php的数据库怎么安装?_后端开发 安装步骤:1、在官网上下载数据库软件,然后双击下载好的数据库软件,打开后点击右下角的“下一步”,选择第一个选项“我接受”;2、默认勾选所有插件;3、选择安装数据库位置,点击“安装”;4、点击“完成”,这时php数据库就安装成功了。 …

Random.Randint 函数--Numpy

Numpy.Random.Randint 函数功能&#xff1a; Return random integers from low (inclusive) to high (exclusive)。 Return random integers from the “discrete uniform” distribution of the specified dtype in the “half-open” interval [low, high). If high is None…

Random库中的8个函数

random库包括两类函数&#xff0c;常用共8个 基本随机函数&#xff1a;seed() 、random()&#xff1b;扩展随机函数&#xff1a;randint()、getrandbits()、uniform()、randrange()、choice()、shuffle() 基本随机函数&#xff1a; seed()函数&#xff1a;初始化给定的随机数…

maven下载安装及IDEA配置、使用maven导出项目jar包并部署到服务器上

目录 1.下载安装 2.增加maven镜像仓库和修改仓库下载位置 镜像配置 修改仓库下载位置 3.小试&#xff1a;在idea中创建一个新maven项目 4.IDEA上配置maven 5.maven导出项目jar包 6.导出的项目jar包部署到服务器上 1.下载安装 &#xff08;1&#xff09;进入下载地址Ma…

maven的下载安装配置教程

maven的下载安装配置教程&#xff08;详细图文&#xff09; **各有各的选择&#xff0c;这也是一种过程**想要实现一个优秀的项目&#xff0c;光靠自己一个码农是很难的&#xff0c;我们需要引入别人已经集成好的类包来帮助我们优化项目&#xff0c;这个时候就需要使用maven了。…

Maven 的下载安装教程

Maven 3.6.3 下载安装教程 笔者的环境&#xff1a; JDK 13.0.2 Maven 3.6.3 IntelliJ IDEA 2020.1.2 (Ultimate Edition) 在继续阅读本教程之前&#xff0c;需要先完成 JDK 的安装。关于 JDK 的安装&#xff0c;可见笔者的另一篇博客&#xff1a; Java 的下载安装教程&…

Maven的下载安装与使用(idea)

Maven是什么 Maven是一款服务于Java平台的自动化构建工具。Maven 作为 Java 项目管理工具&#xff0c;它不仅可以用作包管理&#xff0c;还有许多的插件&#xff0c;可以支持整个项目的开发、打包、测试及部署等一系列行为。 传统工程我们直按把jar包放置在项目中&#xff0c; …