uni-app:获取当前经纬度解决方案+如何布置全局组件

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

 

一.布置全局组件

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

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

 

 2.然后在里面写好组件

 

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

1
2
import movable from "@/components/movable/index.vue";
Vue.component("movable", movable);

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于和门店的距离长度"
            }
        },
        "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]
    },

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

检测权限

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 位置授权
            getAuthorizeInfo() {
                const that = this;
                uni.authorize({
                    scope: 'scope.userLocation',
                    success() { // 允许授权
                        that.getLocationInfo();
                    },
                    fail() { // 拒绝授权
                        that.openConfirm();
                        // console.log("你拒绝了授权,无法获得周边信息")
                    }
                })
            },

获取地理位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取地理位置
            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');
                    }
                });
            },

错误处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 再次获取授权
            // 当用户第一次拒绝后再次请求授权
            openConfirm() {
                uni.showModal({
                    title: '请求授权当前位置',
                    content: '需要获取您的地理位置,请确认授权',
                    showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            uni.openSetting(); // 打开地图权限设置
                        }
                    }
                });
            },

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

 

posted @   林恒  阅读(543)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
欢迎阅读『uni-app:获取当前经纬度解决方案+如何布置全局组件』
点击右上角即可分享
微信分享提示