微信小程序 |
您所在的位置：网站首页 › 获取不到地理位置,请确认是否授权微信获取地理位置 › 微信小程序 |
微信小程序
|
获取地理位置需求，应该说是一个不太常用，但是非常常见的一个功能。 所以今天以小程序为例，一起学习一下，看看都有哪些方面需要注意。 授权地理位置 配置manifest.jsonmanifest.json视图manifest.json源码 授权请求authorize获取经纬度 getLocation引入地图，逆向解析注册账号（免费）创建新秘钥开发者秘钥申请key 设置 下载小程序SDK引入SDK，最终代码 配置manifest.json在微信小程序配置中，必须勾选位置接口，并且写明描述 manifest.json视图
authorize的作用，便是提前向用户发起授权请求。返回之前的授权结果：成功或者失败。一般搭配uni.getSetting和uni.openSetting使用。 关于openSetting具体可以戳这里~ 关于authorize具体可以戳这里~ 获取经纬度 getLocation uni.authorize({ scope: "scope.userLocation", success: () => { uni.showLoading({ title: '定位中...' , mask:true }) uni.getLocation({ type: "gcj02", // wgs84: 返回GPS坐标，gcj02: 返回国测局坐标 success: res => { console.log(res,'经纬度') } }); }, fail: () => { //console.log('请授权获取你的位置，否则部分功能将无法使用！') uni.showModal({ //弹出提示框 title: '是否打开设置页？', content: '请授权获取你的位置，否则部分功能将无法使用！', success(res) { if (res.confirm) { // 用户点击确定按钮 uni.openSetting({ // 确认后打开设置页面 success(res) { // if(res.authSetting['scope.userLocation']){ // console.log("手动授权成功") // }else{ // console.log("手动授权失败") // } }, fail(){ console.log("打开设置页面失败") } }) } else if (res.cancel) { // 用户点击取消按钮 console.log('用户点击取消'); } }, fail(){ console.log("确认取消弹出未弹出") } }) }, });到这里咱们就可以得到地理位置的经纬度，但是如果想获得详细的地理位置，还需要逆向解析一下 引入地图，逆向解析这里咱们以小程序为例，所以引入腾讯地图。 注册账号（免费）首先需要注册腾讯地图账号，获得key
申请成功后，还需要详细配置一下，点击key列表设置按钮后，这里有4处重点，如图： 1、微信APP ID 2、勾选WebServiceAPI 3、选中 域名白名单，可以不在里面填写域名，不然校验失败一直提示无权限。 4、安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com (这里很重要)
拿到秘钥后，便需要引入腾讯地图SDK，下载地址戳这里~ JavaScriptSDK v1.1 JavaScriptSDK v1.2 或者参考具体文档~ 引入SDK，最终代码 addressDetailFn (){ const qqmapsdk = new QQMapWX({ key: "Mxxx-xxx-xxxx--地图秘钥" }); //提前获得授权结果 uni.authorize({ scope: "scope.userLocation", //已同意授权 success: () => { //开启loading，防止多次触发 uni.showLoading({ title: '定位中...' , mask:true }) //获得经纬度 uni.getLocation({ type: "gcj02", // wgs84: 返回GPS坐标，gcj02: 返回国测局坐标 success: res => { const {latitude, longitude} = res; const location = {latitude, longitude}; // 传入经纬度，逆向解析 qqmapsdk.reverseGeocoder({ location, success: (res) =>{ //关闭loading uni.hideLoading(); //最终地址 let ad_info = res.result.ad_info || {}; let address = ad_info.province+'-'+ad_info.city+'-'+ad_info.district; let detailAddress = res.result.formatted_addresses.recommend console.log(address,'省市县') console.log(detailAddress,'详细的地址') }, fail :(e)=>{ uni.hideLoading(); } }); }, fail :(e)=>{ //这里也很重要，有可能用户关闭了GPS，虽然可以定位，但是没有位置信息 uni.hideLoading(); uni.showModal({ content:'位置定位失败，请检查您的GPS是否开启', showCancel:false, confirmText:'知道了' }) console.log(e,'获取经纬度') } }); }, // 拒绝了授权 fail: () => { uni.showModal({ //弹出提示框 title: '是否打开设置页？', content: '请授权获取你的位置，否则部分功能将无法使用！', success(res) { if (res.confirm) { // 用户点击确定按钮 uni.openSetting({ // 确认后打开设置页面 success(res) { // if(res.authSetting['scope.userLocation']){ // console.log("手动授权成功") // }else{ // console.log("手动授权失败") // } }, fail(){ console.log("打开设置页面失败") } }) } else if (res.cancel) { // 用户点击取消按钮 console.log('用户点击取消'); } }, fail(){ console.log("确认取消弹出未弹出") } }) }, }); }这样便能拿到详细的地理位置了，大家可能对于我拼接的最终具体地址有疑惑，这里可以根据需求自行拼接，具体参数值，戳这里~ |
【本文地址】
今日新闻 |
推荐新闻 |