欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app 系列(十九):uniapp在app、H5、微信小程序中打开地图及打开权限设置,实测可用

程序员文章站 2022-03-27 10:26:21
...

????摘要


今天分享下 —— uni-app 系列(十九):uni-appapp、H5、微信小程序 中打开地图及打开权限设置,实测可用 的一些基本知识,欢迎关注!

欢迎阅读,总结系列:野蛮生长的 uni-app 学习之路

相关文章:uni-app系列(十三):uni-app运行环境判断

uni-app系列(十五):uni-app使用讯飞语音开启App端语音转文字


????提前操作条件

申请腾讯地图开放平台 key

然后进入如下界面,填入 key
uni-app 系列(十九):uniapp在app、H5、微信小程序中打开地图及打开权限设置,实测可用


????上代码

//打开地图
export function chooseLocation(success){
    // 先判断定位权限是否开启
    uni.getLocation({
        success(){
            //定位权限开启,打开地图
            uni.chooseLocation({
                success:function (res) {
					console.log(res);
					console.log('位置名称:' + res.name);
					console.log('详细地址:' + res.address); // 移动端大部分地址不带省市区,浏览器预览出来会带上 求解决方案 ?????????
					// 经度
					console.log('经度:' + res.longitude);
					// 纬度
					console.log('纬度:' + res.latitude);
				} // 成功回调
            })
        },
        fail(e) {
            // 定位权限未开启,引导设置
            uni.showModal({
                title: '温馨提示',
                content: '您已拒绝定位,请开启',
                confirmText: '去设置',
                success(res){
                    if (res.confirm) {
                        //打开授权设置
                        openSetting()
                    }
                }
            })
        }
    })
}

//打开授权设置(必须用户点击小程序才能打开授权设置,所以前面加了showModel)
export function openSetting(){
    // 打开小程序的设置
    // #ifdef MP-WEIXIN
    uni.openSetting()
    // #endif
    
    // App跳转系统的设置界面
    // #ifdef APP-PLUS
    uni.getSystemInfo({
        success(res) {
            if(res.platform=='ios'){ //IOS
                plus.runtime.openURL("app-settings://");
            } else if (res.platform=='android'){ //安卓
                let main = plus.android.runtimeMainActivity();
                let Intent = plus.android.importClass("android.content.Intent");
                let mIntent = new Intent('android.settings.ACTION_SETTINGS');
                main.startActivity(mIntent);
            }
        }
    });
    // #endif
}
  • 经测试,app、H5、微信小程序三端兼容,上面代码条件编译了 app、微信小程序 这两种,H5 在用户拒绝授权后,每次都会自动弹窗询问,所以不需要处理,如下图所示:uni-app 系列(十九):uniapp在app、H5、微信小程序中打开地图及打开权限设置,实测可用

????使用

  1. 在需要调用的页面引入:import { chooseLocation } from '../../../../components/map/map.js'
  2. 随便绑定一个单击事件触发,如下所示:uni-app 系列(十九):uniapp在app、H5、微信小程序中打开地图及打开权限设置,实测可用
  3. 结果如下:uni-app 系列(十九):uniapp在app、H5、微信小程序中打开地图及打开权限设置,实测可用

最后感谢大家耐心观看完毕,留个点赞收藏是您对我最大的鼓励!


????最后

  • 更多参考精彩博文请看这里:《陈永佳的博客》

  • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!