uniapp实时获取用户位置（uni-app:获取当前经纬度解决方案+如何布置全局组件）

时间2025-09-16 19:42:15分类IT科技浏览6050

导读：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

一.布置全局组件

在我们开发的过程中，会碰到一个现象，就是在页面里面引入组件，总算要写import ，components才能引用，这里给大家分享我们的一个解决方案

1.首先要建立一个components文件夹，用来放我们的所有组件

2.然后在里面写好组件

3.来到main.js ，在代码中加入两行代码

这样我们就能在页面里，不用写import ，components ，就能引用了

二.获取当前经纬度解决方案

这里给大家分享出一套我使用的获取当前经纬度的方案

1.小程序设置，去小程序公众平台，开启接口权限

2.代码中manifest.json文件以下位置加上代码

/* 小程序特有相关 */ "mp-weixin" : { "appid" : "", "setting" : { "urlCheck" : false }, "usingComponents" : true, "permission" : { "scope.userLocation" : { "desc" : "你的位置信息将用于和门店的距离长度" } }, "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ] },

3.页面方法分享，分为检测权限，成功处理，错误处理

检测权限

// 位置授权 getAuthorizeInfo() { const that = this; uni.authorize({ scope: scope.userLocation, success() { // 允许授权 that.getLocationInfo(); }, fail() { // 拒绝授权 that.openConfirm(); // console.log("你拒绝了授权，无法获得周边信息") } }) },

获取地理位置

// 获取地理位置 getLocationInfo() { const that = this uni.getLocation({ type: wgs84, success(res) { uni.setStorageSync("lat", res.latitude) uni.setStorageSync("lng", res.longitude) }, fail(res) { // 拒绝授权 console.log(res, 222); } }); },

错误处理

// 再次获取授权 // 当用户第一次拒绝后再次请求授权 openConfirm() { uni.showModal({ title: 请求授权当前位置, content: 需要获取您的地理位置，请确认授权, showCancel: false, success: (res) => { if (res.confirm) { uni.openSetting(); // 打开地图权限设置 } } }); },

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。