摘要

今天分享下 —— uni-app 系列（十九）：uni-app 在 app、H5、微信小程序 中打开地图及打开权限设置，实测可用 的一些基本知识，欢迎关注！

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

相关文章：uni-app系列（十三）：uni-app运行环境判断

uni-app系列（十五）：uni-app使用讯飞语音开启App端语音转文字

提前操作条件

申请腾讯地图开放平台 key

然后进入如下界面，填入 key：

上代码

//打开地图
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 在用户拒绝授权后，每次都会自动弹窗询问，所以不需要处理，如下图所示：

使用

1. 在需要调用的页面引入：import { chooseLocation } from '../../../../components/map/map.js'
2. 随便绑定一个单击事件触发，如下所示：
3. 结果如下：

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

最后

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

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