uniapp 获取用户权限并获取当前位置打开地图

第一步:uniapp需要先调取用户授权请求询问用户是否授权

第一步:uniapp需要先调取用户授权请求询问用户是否授权
uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})
// 该方法h5不支持

第二步:做获取用户位置

2.1:找到uniapp配置文件


image.png

2.2:找到小程序配置勾选位置接口,描述里所填项就是授权时向用户展示的授权原因


image.png

第三步:开始调取不同的api,比如说选择位置和查看位置

    // 点击调起地图选择位置
            goMap() {
                uni.authorize({
                    scope: 'scope.userLocation',
                    success(res) {
                        uni.chooseLocation({
                            success: function (res) {
                                 console.log('位置名称:' + res.name);
                                 console.log('详细地址:' + res.address);
                                 console.log('纬度:' + res.latitude);
                                 console.log('经度:' + res.longitude);
                             }
                        });
                    },
                    fail(err) {
                
                    }
                })
            },


    // 点击调起地图查看位置
            goMap() {
            //查看位置需要传经纬度才能执行
                const lat = parseFloat(latitude)
                const log = parseFloat(longitude)

                uni.authorize({
                    scope: 'scope.userLocation',
                    success(res) {
                        uni.openLocation({
                            latitude: lat,
                            longitude: log,
                            success: function() {}
                        });
                    },
                    fail(err) {
                        
                    }
                })
            },

// #ifdef MP-WEIXIN
            mapPlace() {
                // uni.authorize
                // 提前向用户发起授权请求。
                // 调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据
                uni.authorize({
                    scope: 'scope.userLocation',
                    // 成功
                    success() {
                        // 1 用户允许授权
                        // 2 用户之前已经同意授权,则不会出现弹窗,直接返回成功
                        //  以上两种情况都会进入到success回调中
                        
                        // 获取用户当前位置 并打开地图
                        uni.chooseLocation({
                            success: function(res) {
                                // 返回用户当前选择的位置信息;
                                // 可进行保存data 回显在表单上/提交后台
                                console.log('位置名称:' + res.name);
                                console.log('详细地址:' + res.address);
                                console.log('纬度:' + res.latitude);
                                console.log('经度:' + res.longitude);
                            }
                        });
                    },
                    // 失败
                    fail() {
                        // 1 用户拒绝授权
                        // 2 用户之前拒绝了授权,此接口会直接进入失败回调
                        //  以上两种情况都会进入到fail回调中
                        // 
                    }
                })
            },
            //#endif
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容