既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
+ 在 `微信小程序` 中,当用户离开应用后,此接口无法调用,需要申请 [后台持续定位权限]( ) ,另外新版本中需要使用 [wx.onLocationChange]( ) 监听位置信息变化;当用户点击“显示在聊天顶部”时,此接口可继续调用
补充: 以上内容为 官方文档 搬运过来的,详情可点击链接跳转至官网。
我们本次开发的是小程序,需要注意的是,我们本次小程序获取定位使用的是腾讯位置服务,所以需要申请腾讯位置服务的SDK。
2、腾讯位置服务平台申请密钥和下载SDK
申请步骤:详细文档
2.1 申请开发者秘钥
点击文档中的申请秘钥链接,跳转至腾讯位置服务平台,如下图所示申请即可。(没有账号的先注册账号
)
2.2 开通webserviceAPI服务
开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
1、申请Key
2、复制申请好的Key值等待使用
2.3 下载微信小程序JavaScriptSDK
微信小程序JavaScriptSDK下载地址(点击文字即可跳转)
下载好解压完成后,我们一般放在根目录下面的common目录下(如下图)
2.4 安全域名设置
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
到这里终于算是申请完了,在配置一下就好了。
3、配置manifest.json文件
"permission" : {
"scope.userLocation" : {
"desc" : "为了您更好的体验,请确认获取您的位置"
}
}
"requiredPrivateInfos": ["getLocation", "chooseLocation"]
4、示例代码展示
4.1 引用下载好的SDK
这里我放到了common目录下:
import QQMapWX from "../../common/qqmap-wx-jssdk.js"
4.2 获取定位函数示例
methods: {
//获取位置信息
async getLocationInfo() {
return new Promise((resolve) => {
//位置信息默认数据
let location = {
longitude: 0,
latitude: 0,
province: "",
city: "",
area: "",
street: "",
address: "",
};
uni.getLocation({
type: "gcj02",
success(res) {
location.longitude = res.longitude;
location.latitude = res.latitude;
// 腾讯地图Api
const qqmapsdk = new QQMapWX({
key: 'XXXXXXXXXXXXXXXXXXXXXXXX' //这里填写自己申请的key
});
qqmapsdk.reverseGeocoder({
location,
success(response) {
let info = response.result;
console.log(info);
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
resolve(location);
},
});
},
fail(err) {
console.log(err)
resolve(location);
},
});
});
}
}
4.3 调用函数
函数调用可以自己去选择在页面加载的时候加载,或者有一个触发条件。(我是用的页面加载,所以放在了onload方法中)。
async onLoad() {
const location = await this.getLocationInfo();
this.position = location.address
},
注意:
这里使用的this.position,是在data中定义的,代码示例中没有写。需要自己在data方法中定一个position变量
4.4 页面渲染
<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
当前定位:{{position}}
</view>
5、效果展示
到这里就结束啦!想要的获取用户位置信息的功能就实现啦。
🎃专栏分享:
小程序项目实战专栏:《uniapp小程序开发》
前端面试专栏地址:《面试必看》
⏳
名言警句:说能做的,做说过的
\textcolor{red} {名言警句:说能做的,做说过的}
名言警句:说能做的,做说过的
✨
原创不易,还希望各位大佬支持一下
\textcolor{blue}{原创不易,还希望各位大佬支持一下}
原创不易,还希望各位大佬支持一下
👍
点赞,你的认可是我创作的动力!
\textcolor{green}{点赞,你的认可是我创作的动力!}
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
lIgOdnm-1715536455511)]
[外链图片转存中…(img-FgvoPO8d-1715536455512)]
[外链图片转存中…(img-csiivUaZ-1715536455512)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新