小程序开发设计在提升企业数字化转型效率中的关键作用
747
2023-11-09
微信小程序获取当前位置的详细步骤
微信小程序获取位置信息的方式有两种，一种是调用微信官方的接口来获取，如getLocation,这种方式只能获取经纬度
微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
另一种是使用的第三方平台的，比如本文章使用的是 腾讯地图
微信小程序JavaScript SDK / 开发指南 / 入门及使用限制-开发文档
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
1 腾讯位置开发基本步骤
1.1 申请开发者密钥（key）
申请密钥 ：登录腾讯开发者平台，然后创建应用，如下图
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
1.2 -微信小程序JavaScriptSDK
-微信小程序JavaScriptSDK
https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
-后解压，拷贝到微信小程序项目中
1.3 安全域名设置
安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加
https://apis.map.qq.com
1.4 微信小程序设置隐私权限
在app.json 文本中添加
?
1
2
3
4
5
6
7
8
"permission": {
"scope.userLocation": {
"desc": "小程序需要使用您的位置信息 已确认您的采样地址"
}
},
"requiredPrivateInfos": [
"getLocation"
],
getLocation 是使用微信接口来获取经纬度时使用，需要申请调用权限。
2 获取位置信息
核心代码如下：
3 权限问题
当用户第一次进入页面获取位位置信息时，小程序会弹出请求位置权限申请，如果用户点击了拒绝权限，那下次进入时，将不会再次弹出权限申请，所以这个过程需要开发者来维护处理一下。
如果用户拒绝过，再次进入后，弹框提示用户开启权限
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//定位方法
initLocationPersmiss: function () {
var _this = this;
wx.getSetting({
success: (res) => {
// res.authSetting[scope.userLocation] == undefined 表示 初始化进入该页面
// res.authSetting[scope.userLocation] == false 表示 非初始化进入该页面,且未授权
// res.authSetting[scope.userLocation] == true 表示 地理位置授权
if (res.authSetting[scope.userLocation] != undefined && res.authSetting[scope.userLocation] != true) {
//未授权
wx.showModal({
title: 请求授权当前位置,
content: 需要获取您的地理位置，请确认授权,
success: function (res) {
if (res.cancel) {
//取消授权
wx.showToast({
title: 拒绝授权 暂时无法使用本功能,
icon: none,
duration: 1000
})
} else if (res.confirm) {
//确定授权，通过wx.openSetting发起授权请求
wx.openSetting({
success: function (res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: 授权成功,
icon: success,
duration: 1000
})
//再次授权，调用wx.getLocation的API
_this.initGetLocationFlunction();
} else {
wx.showToast({
title: 授权失败,
icon: none,
duration: 1000
})
}
}
})
}
}
})
} else if (res.authSetting[scope.userLocation] == undefined) {
//用户首次进入页面,调用wx.getLocation的API
_this.initGetLocationFlunction();
} else {
console.log(授权成功)
//调用wx.getLocation的API
_this.initGetLocationFlunction();
}
}
})
},
获取位置的请求
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
initGetLocationFlunction(isRefresh){
let that = this;
this.setData({isUpdateLocatin:true})
qqmapsdk.reverseGeocoder({
success: function(res) {
let result = res.result;
console.log(res);
},
fail: function(res) {
console.log(res.status, res.message);
},
complete: function(res) {
console.log(res.status, res.message);
}
})
},
完毕
总结
您可能感兴趣的文章:微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递使用微信小程序API，调用微信的各种内置能力。微信小程序怎么加入JavaScript脚本，做出动态效果微信小程序如何设置基本的页面样式，做出用户界面UI制作微信小程序的小白简单入门教程微信小程序实现云开发上传文件、图片功能微信小程序获取用户头像昵称组件封装实例(最新版)微信小程序父子组件通信详细介绍微信小程序tabBar自定义弹窗遮挡不住解决技巧微信小程序api列表汇总包括网络API,媒体API,文件API ,微信小程序支付流程,位置API,界面API等
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 小程序开发设计在提升企业数字化转型效率中的关键作用
- 企业如何利用flutter小程序提升管理与运营效率
- 洞察企业在使用vue小程序时，如何结合FinClip的监管与管理能力提高合规性和效率?
- 随着数字化转型的不断深入，小程序技术标准如何在金融、安全和物联网等领域实现高效合规运营？
- 如何通过微信小程序 API 优化企业管理与服务，提升数字化转型效率？
- 小程序行为分析助力App灵活管理和数字化转型
- 洞察如何利用FinClip的小程序容器技术实现高效能Windows应用管理，助力企业数字化转型
- 如何在数字化转型中利用移动应用开发提升企业敏捷性与市场适应性？
- 小程序容器助力企业在金融与物联网领域实现高效合规运营，带来的新机遇与挑战如何管理？
- 小程序引擎如何促进企业在金融行业的数字化转型及合规运营
推荐文章
热评文章
暂时没有评论，来抢沙发吧~